CSS-in-JS

CSS-in-JS 是将 CSS 代码编写在 JavaScript 中的一种技术。它包括多个优秀的框架和工具，例如 styled-components、Emotion、JSS 等等。

传统的 CSS 代码写在一个单独的样式表文件中，在 React App 中通过引入样式文件的方式加载。但是，随着应用程序的增加，样式表文件也变得庞大，难以维护。此外，传统的 CSS 基于类和选择器，所有环境的样式都存放在一个全局作用域中，可能会导致样式的重用和碰撞问题。

CSS-in-JS 技术主要有以下优点：

1. 更好的可维护性：样式与组件耦合在一起，更加模块化，易于维护。

2. 更好的可复用性：样式不再使用全局类名，提供了更细粒度的样式控制，使得组件更加可复用。

3. 更好的性能：使用 CSS-in-JS 技术，可以将样式嵌入到组件中并根据需要动态加载，因此可以有效地减少样式的大小和数量，从而提高性能。

4. 更灵活的样式方案：通过 JavaScript 的编程能力，可以实现更加灵活和动态的样式方案。

总之，CSS-in-JS 技术可以提供更好的开发体验和性能，但是需要一定的学习成本。在使用时，需要根据具体场景选择合适的工具，以满足项目的需求。

首先 1 ： 下载插件

npm install styled-components

引入插件并使用

jsx:

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${({ primary }) => primary ? '#0077FF' : '#FFF'};
  color: ${({ primary }) => primary ? '#FFF' : '#333'};
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  border-radius: 0.25rem;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);
  cursor: pointer;

  &:hover {
    background-color: ${({ primary }) => primary ? '#0064E6' : '#F0F0F0'};
  }
`;

function MyComponent() {
  return (
    <div>
      <Button primary>Primary Button</Button>
      <Button>Default Button</Button>
    </div>
  );
}

tsx:

import React from 'react';
import styled from 'styled-components';

interface ButtonProps {
  primary?: boolean;
  onClick?: () => void;
}

const Button = styled.button<ButtonProps>`
  background-color: ${({ primary }) => (primary ? '#0077FF' : 'white')};
  color: ${({ primary }) => (primary ? 'white' : '#333')};
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.1);

  &:hover {
    background-color: ${({ primary }) => (primary ? '#0064E6' : '#F0F0F0')};
  }
`;

function MyComponent() {
  const handleClick = () => {
    console.log('button clicked');
  };

  return (
    <div>
      <Button primary onClick={handleClick}>
        Primary Button
      </Button>
      <Button onClick={handleClick}>Default Button</Button>
    </div>
  );
}