react样式如何设定
内联样式
在React中可以直接使用内联样式，通过style属性传递一个对象。对象中的属性采用驼峰命名法，例如backgroundColor而非background-color。
const divStyle = {
color: 'blue',
backgroundColor: 'lightgray'
};
function MyComponent() {
return <div style={divStyle}>Hello World</div>;
}CSS样式表
引入外部CSS文件是最常见的方式。创建一个.css文件并在组件中导入。
/* styles.css */
.my-class {
color: red;
font-size: 16px;
}import './styles.css';
function MyComponent() {
return <div className="my-class">Hello World</div>;
}CSS Modules
CSS Modules可以避免全局样式冲突，生成唯一的类名。文件名需以.module.css结尾。
/* styles.module.css */
.myClass {
color: green;
}import styles from './styles.module.css';
function MyComponent() {
return <div className={styles.myClass}>Hello World</div>;
}Styled-components
使用styled-components库可以编写组件级CSS，支持动态样式。
import styled from 'styled-components';
const StyledDiv = styled.div`
color: purple;
font-size: 20px;
`;
function MyComponent() {
return <StyledDiv>Hello World</StyledDiv>;
}动态样式
根据条件动态调整样式，可以通过内联样式或模板字符串实现。
function MyComponent({ isActive }) {
const dynamicStyle = {
color: isActive ? 'green' : 'red'
};
return <div style={dynamicStyle}>Dynamic Content</div>;
}全局样式
通过createGlobalStyle（styled-components）或直接在index.css中定义全局样式。
import { createGlobalStyle } from 'styled-components';
const GlobalStyle = createGlobalStyle`
body {
margin: 0;
font-family: Arial;
}
`;
function App() {
return (
<>
<GlobalStyle />
<OtherComponents />
</>
);
}第三方UI库
如Material-UI、Ant Design等提供了预设样式组件，可直接使用其主题和样式系统。
import { Button } from '@mui/material';
function MyComponent() {
return <Button variant="contained">Click Me</Button>;
}
