什么是 CSS-in-JS?

“CSS-in-JS” 是指一种模式，其中 CSS 由 JavaScript 生成而不是在外部文件中定义。在 此处 阅读 CSS-in-JS 库之间的对比。

注意此功能并不是 React 的一部分，而是由第三方库提供。 React 对样式如何定义并没有明确态度；如果存在疑惑，比较好的方式是和平时一样，在一个单独的 *.css 文件定义你的样式，并且通过 className 指定它们。

这里的第三方库插件是利用styled-components在单独的 *.css 文件去定义你的样式，通过 className 指定它们。

styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。
优点：
贯彻React的 everything in JS理念，降低js对css⽂件的依赖
组件的样式和其他组件完全解耦，有效避免了组件之间的样式污染

安装

yarn add styled-components
yarn add @types/styled-components -D

示例

// css.ts
import styled from 'styled-components'
import login_bg from '@/assets/images/login_bg.svg'
export const LoginWrapper = styled.div`
  min-width: 500px;
  height: 100vh;
  background-image: url(${login_bg});
  background-color: #eee;
  background-position: 50%;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .login_content {
    width: 92%;
    height: 92%;
    display: flex;
    background-color: #fffc;
    overflow: hidden;
    padding: 20px;
    border-radius: 10px;
    .left {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
      }
    }
    .right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (max-width: 1200px) {
      .left {
        // flex: 0;
      }
    }
  }
`

// index.tsx
import React, { memo } from 'react'
import LoginForm from './components/LoginForm'
import login_left from '@/assets/images/login_left.png'
import { LoginWrapper } from './css'

const Login = memo(() => {
  return (
    <LoginWrapper>
      <div className="login_content">
        <div className="left">
          <img src={login_left} alt="img" />
        </div>
        <div className="right">
          <LoginForm />
        </div>
      </div>
    </LoginWrapper>
  )
})

export default Login

关于样式及 CSS详细见解在React官方文档中。