【实战】 CSS 其实很简单 - 用 CSS-in-JS 添加样式 —— React17+React Hook+TS4 最佳实践，仿 Jira 企业级项目

在React 17及以上版本中，我们可以使用新的JSX转换来在React组件中编写CSS-in-JS。这里我们将使用styled-components库来演示如何实现CSS-in-JS。

首先，确保安装了styled-components：

npm install styled-components

然后，你可以在React组件中这样使用它：

import React from 'react';
import styled from 'styled-components';
 
// 创建一个带样式的按钮组件
const StyledButton = styled.button`
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文本 */
  padding: 15px 32px; /* 内边距 */
  text-align: center; /* 居中文本 */
  text-decoration: none; /* 无文本装饰 */
  display: inline-block; /* 行内块显示 */
  font-size: 16px; /* 字体大小 */
  margin: 4px 2px; /* 外边距 */
  cursor: pointer; /* 手形鼠标光标 */
`;
 
// 使用StyledButton组件
const App = () => {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
};
 
export default App;

在这个例子中，我们创建了一个StyledButton组件，并通过模板字符串内的CSS样式定义了它的样式。然后在App组件中，我们直接使用<StyledButton>来渲染带有样式的按钮。这样的方式使得样式与组件声明合一，提高了代码的可读性和可维护性。