react如何设置样式
设置行内样式
在React中可以直接使用style属性设置行内样式，需要传递一个JavaScript对象。CSS属性名需要转换为驼峰命名法。
<div style={{ color: 'red', fontSize: '16px' }}>行内样式示例</div>使用CSS类名
通过className属性引用外部CSS文件中定义的类名，这是最常用的样式设置方式。
// App.css
.my-style {
color: blue;
font-weight: bold;
}
// App.jsx
import './App.css';
<div className="my-style">CSS类名示例</div>CSS Modules
CSS Modules提供局部作用域的CSS，避免类名冲突。文件名需要以.module.css结尾。
// styles.module.css
.title {
color: green;
}
// 组件文件
import styles from './styles.module.css';
<h1 className={styles.title}>CSS Modules示例</h1>样式组件库
使用第三方库如styled-components可以创建带样式的组件，支持Sass-like语法和主题功能。
import styled from 'styled-components';
const StyledButton = styled.button`
background: ${props => props.primary ? 'palevioletred' : 'white'};
color: ${props => props.primary ? 'white' : 'palevioletred'};
`;
<StyledButton primary>样式组件示例</StyledButton>动态样式
根据组件状态或属性动态计算样式值，适用于需要响应式变化的场景。
function DynamicComponent({ isActive }) {
const dynamicStyle = {
backgroundColor: isActive ? 'yellow' : 'transparent',
transition: 'background-color 0.3s'
};
return <div style={dynamicStyle}>动态样式示例</div>;
}全局样式
在顶层组件中引入全局CSS文件，或在index.js中直接导入，影响整个应用。
// index.js
import './global.css';样式预处理
使用Sass/Less等预处理器需要先安装相应loader，创建.scss或.less文件后正常导入。
// 安装sass
npm install sass
// styles.scss
$primary-color: #333;
.text { color: $primary-color; }
// 组件中
import './styles.scss';
