React教程(九) : Styled Component

官网地址：https://styled-components.com/docs/basics

使用Styled Component的几大理由
1）Scoped Style(范围限定的样式)
不用担心引用的css文件被其他人修改

2）CSS in JS
可以在JS中使用component内部变量做条件判断

const Button = styled.button`
  /* Adapt the colors based on primary prop */
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};
`;

<Button primary>Normal</Button>

3）可移植性
没有了css，所有样式都在组件内部，方便移植到其他平台，如React Native。

4）没有了样式命名的冲突
没有class name的冲突，适用于微前端架构。 因为微前端的一大问题就是不用sub app之间可能定义了相同名称的样式。 而style component的class name是通过hash算法得出的，不会冲突。

5）便于对样式做unit test
通过style-components团队提供的组件
npm install --dev jest-styled-components
我们可以进行如下的单元测试

import React from 'react'
import styled from 'styled-components'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
const Button = styled.button`
  color: red;
`
test('it works', () => {
  const tree = renderer.create(<Button />).toJSON()
  expect(tree).toMatchSnapshot()
})

一句话总结：CSS-IN-JS
代码示例: https://github.com/992990831/modernization/tree/main/responsive-layout

常用API
1: styled - 基础API，生成组件
2: attrs - 为组件添加属性(Props)

const Input = styled.input.attrs(props => ({
  // we can define static props
  type: "text",
  // or we can define dynamic ones
  size: props.size || "1em",
}))`

3: as - 转变组件类型，比如将一个div转变为button

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button"
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

4: css - 避免创建新的组件，直接应用样式。 需要修改babel。

<div
  css={`
    background: papayawhip;
    color: ${props => props.theme.colors.text};
  `}
/>
<Button
  css="padding: 0.5em 1em;"
/>

参考：https://styled-components.com/docs/tooling#babel-plugin

5: TypeScript兼容
To prevent TypeScript errors on the css prop on arbitrary elements, install @types/styled-components and add the following import once in your project:
import {} from 'styled-components/cssprop'

6: createGlobalStyle - 创建并应用全局样式

7: ThemeProvider

8: keyFrames - 创建动画

import styled, { keyframes } from 'styled-components'

const fadeIn = keyframes`
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
`

const FadeInButton = styled.button`
  animation: 1s ${fadeIn} ease-out;

问题及答复
1）有同事问，Styled-Component的CSS都分散在各个组件中，不能像传统CSS文件那样有个总的样式，岂不是很麻烦？
答复：styled-components提供了createGlobalStyle方法，可以创建global样式。代码示例如下：
新建src/styles/global.js

import { createGlobalStyle } from "styled-components";
import px2vw from "../utils/px2vw";

export const Global = createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root {
      font-size: ${px2vw(24)};

      @media (min-width: 768px) {
        font-size: ${px2vw(18)};
      }

      @media (min-width: 1024px) {
        font-size: ${px2vw(16)};
      }
    }
`;

export default Global;

在App.js中引用该Global样式

import Global from "./styles/global";

function App() {
  return (
    <>
      <Global />
      <Home />
    </>
  );