react如何加style
React 中添加样式的方法
在 React 中可以通过多种方式添加样式，以下是常见的几种方法：
内联样式
使用 JavaScript 对象定义样式，通过 style 属性直接传递给组件。样式属性需要使用驼峰命名法。
<div style={{ color: 'red', fontSize: '16px' }}>内联样式示例</div>CSS 样式表
创建独立的 .css 文件，通过 className 属性引用样式类名。
/* styles.css */
.my-style {
color: blue;
font-size: 14px;
}import './styles.css';
<div className="my-style">CSS 样式表示例</div>CSS Modules 使用 CSS Modules 可以避免类名冲突，每个组件的样式是局部的。
/* MyComponent.module.css */
.text {
color: green;
}import styles from './MyComponent.module.css';
<div className={styles.text}>CSS Modules 示例</div>Styled-components
使用 styled-components 库可以直接在 JavaScript 中编写 CSS。
import styled from 'styled-components';
const StyledDiv = styled.div`
color: purple;
font-size: 18px;
`;
<StyledDiv>Styled-components 示例</StyledDiv>Tailwind CSS 通过实用类名快速添加样式，无需编写自定义 CSS。
<div className="text-yellow-500 text-lg">Tailwind CSS 示例</div>Sass/SCSS 使用 Sass 或 SCSS 预处理器增强 CSS 功能。
/* styles.scss */
$primary-color: orange;
.my-sass-style {
color: $primary-color;
}import './styles.scss';
<div className="my-sass-style">Sass/SCSS 示例</div>动态样式 根据组件状态或属性动态调整样式。
function DynamicStyleExample({ isActive }) {
const style = {
color: isActive ? 'green' : 'gray',
fontWeight: isActive ? 'bold' : 'normal'
};
return <div style={style}>动态样式示例</div>;
}选择哪种方法取决于项目需求、团队偏好和样式复杂性。对于小型项目，内联样式或 CSS 样式表可能足够；大型项目可能需要 CSS Modules 或 styled-components 来管理样式。
