React 中 CSS in JS 的最佳实践

import React from 'react';
import styled from 'styled-components';
 
// 使用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; /* 手形鼠标光标 */
`;
 
// 使用组件
const App = () => {
  return (
    <div>
      <StyledButton>点击我</StyledButton>
    </div>
  );
};
 
export default App;

这个例子展示了如何在React应用中使用styled-components库来实现CSS in JS的最佳实践。我们创建了一个StyledButton组件，并在其中定义了按钮的样式。然后在App组件中使用了这个样式化的按钮。这种方法使得样式和组件的逻辑更加紧密结合，易于维护和理解。