React中js如何添加元素样式
添加行内样式
在React中可以通过style属性直接添加行内样式，需要传递一个JavaScript对象。对象的属性名采用驼峰命名法，例如backgroundColor而非background-color。
<div style={{ color: 'red', fontSize: '16px' }}>示例文本</div>使用CSS类名
通过className属性引用外部CSS文件或模块化CSS中的类名。这是更推荐的做法，尤其对于复杂样式。
// App.css
.text-style {
font-weight: bold;
padding: 10px;
}
// 组件中
import './App.css';
<div className="text-style">示例文本</div>CSS Modules
使用CSS Modules可以避免类名冲突，文件命名需为[name].module.css。通过导入样式对象访问类名。
// styles.module.css
.error {
border: 2px solid red;
}
// 组件中
import styles from './styles.module.css';
<div className={styles.error}>错误提示</div>动态样式
根据状态或props动态计算样式对象或类名字符串。
function Alert({ type }) {
const color = type === 'warning' ? 'orange' : 'red';
return <div style={{ backgroundColor: color }}>警告信息</div>;
}样式库集成
使用第三方库如styled-components可以编写组件级CSS。
import styled from 'styled-components';
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
color: white;
padding: 8px;
`;
<Button primary>主要按钮</Button>全局样式
在顶层组件中导入常规CSS文件可应用全局样式，或使用createGlobalStyle（styled-components）。
// 全局样式文件
body {
margin: 0;
}
// 入口文件
import './global.css';每种方法适用于不同场景：简单组件适合行内样式，大型项目推荐CSS Modules或样式库，需要主题化时考虑styled-components等解决方案。
