样式化组件

React Strict DOM 包含一个简单、可扩展且确定性的样式系统。它在 web 上生成优化的 CSS 输出，并为原生添加了许多声明式样式功能。

创建样式

样式使用 css.create 函数和一个样式对象映射来创建。在下面的示例中，有 2 个命名的样式规则 - 一个称为“base”，另一个称为“highlighted”。这些名称是任意的，表示用于捕获函数调用结果的常量。

import { css } from 'react-strict-dom';

const styles = css.create({
  base: {
    fontSize: 16,
    lineHeight: 1.5,
    color: 'rgb(60,60,60)',
  },
  highlighted: {
    color: 'rebeccapurple',
  },
});

尽管样式可以被继承，但没有 "selector" API，因此没有 "远程样式化"。

简写属性

简写属性一次性样式化多个属性。例如，margin 设置元素左、右、上和下边距的值。 React Strict DOM 仅允许将单个值与简写属性一起使用，即允许使用 margin: "1rem"，但不允许使用 margin: "1rem 2rem"。简写属性只能用于为其表示的每个长写属性设置相同的值。

伪元素

伪元素是一种定位包含在 React Strict DOM 提供的原生元素中的阴影元素的方法。目前，唯一支持的伪元素是 ::placeholder，它引用包含 html.input 或 html.textarea 元素中占位符文本的元素。只能在占位符上设置 color 样式。

import { css } from 'react-strict-dom';

const styles = css.create({
  input: {
    '::placeholder': {
      color: '#999',
    }
  },
});

伪状态

伪类代表元素的不同状态。伪类的声明必须嵌套在属性中。例如，要更改不同状态的背景颜色

import { css } from 'react-strict-dom';

const styles = css.create({
  button: {
    backgroundColor: {
      default: 'lightblue',
      ':hover': 'blue',
      ':active': 'darkblue',
    },
  },
});

指定属性状态时，需要 default 情况。如果您不希望在默认情况下应用任何样式，请使用 null 作为值。

媒体查询

元素的不同媒体状态也必须嵌套在属性中。键应该是有效的媒体查询。例如

import { css } from 'react-strict-dom';

const styles = css.create({
  base: {
    width: {
      default: 800,
      '@media (max-width: 800px)': '100%',
      '@media (min-width: 1540px)': 1366,
    },
  },
});

备用样式

firstThatWorks 方法可用于定义备用值，这些备用值应在平台（或浏览器）可能不支持第一个值的情况下使用。

import { css } from 'react-strict-dom';

const styles = css.create({
  header: {
    position: css.firstThatWorks('sticky', 'fixed'),
  },
});

动态样式

将样式定义为函数允许在运行时动态计算它们。样式函数可以接受样式的动态部分作为参数。这些样式无法像静态样式那样有效地进行优化。

import { css, html } from 'react-strict-dom';

const styles = css.create({
  size: (height: number, width: number) => ({
    height * 0.9,
    width
  })
});

function MyComponent() {
  const {height, width} = useContainerSize();

  return <html.div style={styles.size(height, width))} />;
}

继承的样式

继承是指元素从 DOM 树中的祖先继承属性值的过程。某些属性（例如 color）会自动被应用到它们的子元素。每个属性都定义了是否会被自动继承。

React Strict DOM 目前仅支持原生上的文本样式属性的继承（这些样式属性可以应用于任何元素。）也可以为任何这些属性设置 inherit 或 unset 值，以恢复其默认行为。

使用样式

定义样式后，可以将它们直接传递给 html.* 元素上的 style 属性。

import { css, html } from 'react-strict-dom';

const styles = css.create({
  root: { ... }
});

const Foo = () => (
  <html.div style={styles.root} />
);

样式可以从其他文件导入并作为 props 提供。

合并样式

style 属性可以接受样式列表并以确定性的方式合并它们。

定义样式的顺序不会影响生成的样式，只会影响它们应用于 HTML 元素的顺序。

import { css, html } from 'react-strict-dom';

const styles = css.create({
  root: { ... }
});

const Foo = (props) => (
  <html.div style={[ props.style, styles.root ]} />
);

条件样式

可以使用常见的 JavaScript 模式（例如三元表达式和 && 运算符）有条件地应用样式。 Falsy 样式（即 null、undefined 或 false）将被忽略。

<html.div
  style={[
    styles.root,
    props.isHighlighted && styles.highlighted,
    isActive ? styles.active : styles.inactive,
  ]}
/>

变体样式

一种称为“变体”的常见样式模式允许根据 props 的值设置样式。在 React Strict DOM 中，使用对象属性查找很容易实现这一点。可以将此模式与条件模式结合使用，以支持应用样式的任意复杂逻辑。

import { css, html } from 'react-strict-dom';

const colorVariantStyles = css.create({
  red: {
    color: 'rgb(200, 0, 0)',
  },
  green: {
    color: 'rgb(0, 200, 0)',
  }
});

const sizeVariantStyles = css.create({
  small: {
    fontSize: '0.75rem',
  },
  large: {
    fontSize: '1.5rem',
  }
});

export function Foo({ color, size, ...props }) {
  return (
    <html.span
      {...props}
      style={[
        colorVariantStyles[color]
        sizeVariantStyles[size]
      ]}
    />
  )
}

调试样式

当在 Babel 预设中将 debug 设置为 true 时，React Strict DOM 在 DOM 输出中包含一些有用的 web 调试信息。您可能还会发现这个 Atomic CSS Devtools 扩展很有用。在原生上，应使用 React Native DevTools。

创建样式​

简写属性​

伪元素​

伪状态​

媒体查询​

备用样式​

动态样式​

继承的样式​

使用样式​

合并样式​

条件样式​

变体样式​

调试样式​