[Day 24 - Modern CSS] 在JS中写CSS，神套件Styled-components

要如何在 React 中撰写 CSS，为元素添加样式？目前的方法有 Inline-Style、CSS Modules...，其中一个方法就是很多人使用的 Styled-components。Styled-components 是一个 CSS-in-JS 函式库，让我们可以在 JS 中撰写 CSS，直接针对 React Component 去进行样式设定，并且同时解决了 CSS 常遇到的命名冲突的问题。

Styling a component

Styled-components 利用了 Javascript 的样板字面值(Template literals)来设置组建的样式，允许在字串中嵌入运算式，字串用反引号 `` 取代单双引号包住；运算式则由 $ 字元和 {} 包裹组成，举例如下：

`string ${expression} string`

设定样式的同时，Styled-components 会直接建立一个 React Component，包含所指定的 Element。比如下面我们针对 <h2> 元素设定样式，同时建立成一个 Component <Title>：

import styled from "styled-components";

const Title = styled.h2`
  font-size: 20px;
  color: red;
`;

render(
  <div>
    <Title>标题文字</Title>
  </div>
);

根据Props改变样式

当我们建立的是一个普通的 React Component，就代表可以在组件间传递 Props，配上样板字面值的功能，针对组件的样式进行调整就变得很方便。举例如下，若 <Title> 有设置 Prop red 就显示红色的文字，没有就显示黑色的文字：

const Title = styled.h2`
  font-size: 20px;
  color: ${props => props.red ? "red" : "black"};
`;

render(
  <div>
    <Title red>标题文字</Title>
    <Title>标题文字</Title>
  </div>
);

扩展样式

在 React 中，会常常使用同一个 Component 来建立相同的 UI，而我们可能希望针对各别组件去稍微修改它的样式， Styled-components就提供了一个方法，只需要将基础组件包在 styled() 内，就能够继承组件样式再扩展出一个新的组件。比如前一个范例，可以用下面的程序码做到相同的效果：

const Title = styled.h2`
  font-size: 20px;
  color: black;
`;
const RedTitle = styled(Title)`
  color: red;
`;

render(
  <div>
    <RedTitle>标题文字</RedTitle>
    <Title>标题文字</Title>
  </div>
);

或者我们想要改变的是 Component 的标签或继承组件，可以利用 Prop as指定，比如将第二个标题从 <h2> 改成 <p> 元素：

render(
  <div>
    <RedTitle>标题文字</RedTitle>
    <Title as="p">标题文字</Title>
  </div>
);

巢状(Nesting)语法

Styled-components 还支持使用 SCSS 语法，可以在巢状结构内设定子组件的样式，或是使用 & 字元添加 CSS 伪类。比如下面的程序码，为 Title Component 加上 hover 样式、以及针对内部的 span 子元素添加样式：

const Title = styled.h2`
  font-size: 20px;
  color: black;

  &:hover {
    color: blue; // <Title> when hovered
  }

  span {
    color: green; // style <span> in <Title>
  }
`;

return (
  <div>
    <RedTitle>标题文字</RedTitle>
    <Title>
      标题<span>文字</span>
    </Title>
  </div>
);

小结

简单的入门了 Styled-components，学会了一些基本的使用，现在我们就可以在 React 中定义元素的样式。

如果文章中有错误的地方，要麻烦各位大大不吝赐教；喜欢的话，也要记得帮我按赞订阅喔❤️

参考资料

• Styled Component - Document