React 中 CSS in JS 的最佳实践，先收藏了

在React中，CSS in JS是一种实现方式，它允许我们在组件内部直接编写CSS。这种方法有一些优点，例如可以避免CSS类名冲突，但也有一些缺点，例如增加了组件的体积和复杂性。

以下是一些CSS in JS的最佳实践：

1. 使用styled-components库

styled-components是一个库，它允许我们使用JavaScript来编写CSS。这是一个很好的实践，因为它可以保持组件的功能性和样式的封装性。

import styled from 'styled-components';
 
const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
`;
 
export default function App() {
  return <Button>Click me</Button>;
}

2. 使用emotion或者styled-jsx库

如果你不想使用styled-components，你还可以选择使用emotion或者styled-jsx。这两个库都允许你在React组件中直接编写CSS。

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
 
function App() {
  const buttonStyle = css`
    background-color: blue;
    color: white;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
  `;
 
  return <button css={buttonStyle}>Click me</button>;
}
 
export default App;

3. 避免使用内联样式

尽管CSS in JS是一个很好的工具，但是你应该避免在每个组件中使用内联样式。内联样式会使得组件难以维护，并且会使得样式和组件的逻辑混在一起，不易于分离。

4. 使用CSS模块

CSS模块允许你将CSS文件封装起来，只在特定的组件中使用。这样可以避免全局样式冲突，并使得样式更容易维护。

// App.module.css
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
 
// App.js
import styles from './App.module.css';
 
function App() {
  return <button className={styles.button}>Click me</button>;
}
 
export default App;

5. 避免在样式中使用JavaScript表达式

尽管CSS in JS允许你使用JavaScript表达式，但是你应该避免这样做，因为这会使得样式难以预测和维护。

总结：尽管CSS in JS有一些优点，但是也有一些缺点。在实践中，我们应该根据具体情况来选择最佳实践，并尽量避免不良影响。