组件样式
JSX 语法相当接近于 HTML 语法。因此,我们拥有与 HTML 几乎相同的标签属性,我们仍然可以使用 CSS 类来处理样式。类是定义在外部的 文件中的。唯一需要注意的是 React 中使用的是 className
,而不是 class
。例如:
内联样式也能很好的工作。类似于 HTML ,我们可以通过 style
属性来直接传入样式。但是,style
属性在 HTML 中是字符串,而在 JSX 中必须得是一个对象。
const inlineStyles = {
color: 'red',
fontSize: '10px',
marginTop: '2em',
'border-top': 'solid 1px #000'
<h2 style={ inlineStyles }>Inline styling</h2>
因为我们用 JavaScript 编写样式,所以从语法角度来看,是有一些限制的。如果我们想要使用原始的 CSS 属性名称,那么我们需要用引号包裹起来,否则需要遵循驼峰式命名规则。但是,使用 JavaScript 编写样式却非常有趣,它比普通的 CSS 更具灵活性。例如样式的继承:
是建立在我们到目前为止所介绍过的内容之上的。如果你不喜欢 JavaScript 用法来写 CSS ,那么可以使用 CSS 模块,它可以让我们继续编写普通的 CSS 。通常,这个库是在打包阶段发挥作用的。可以将它作为编译步骤的一部分进行连接,但通常作为构建系统插件分发。
下面的示例可以让你快速对其运行原理有个大致的了解:
/* style.css */
.title {
color: green;
}
// App.jsx
import styles from "./style.css";
}
当我们提到 普通的 CSS ,并非真的指最原始的 CSS 。它支持一些非常有用的组合技巧。例如:
Styled-components 则是另一种完全不同的方向。此库不再为 React 组件提供内联样式。我们需要使用组件来表示它的外观感受。例如,我们创建了 Link
组件,它具有特定的风格和用法,而再使用 <a>
标签。
const Link = styled.a`
text-decoration: none;
padding: 4px;
border: solid 1px #999;
color: black;
`;
<Link href='http://google.com'>Google</Link>
还有一种扩展类的机制。我们还可以使用 Link
组件,但是会改变它的文字颜色,像这样:
处理 React 应用的样式有多种方式。我个人在生产环境中试验过所有方式,可以说无所谓对与错。正如 JavaScript 中大多数技术一样,你需要挑选一个更适合你的方式。