react 如何引入css
在 React 中引入 CSS 的方法
React 提供了多种引入 CSS 的方式，可以根据项目需求选择合适的方法。以下是常见的几种方式：
内联样式
内联样式直接在组件中通过 style 属性定义，适用于简单的样式需求。
const MyComponent = () => {
const style = {
color: 'blue',
fontSize: '16px'
};
return <div style={style}>Hello World</div>;
};外部 CSS 文件
通过 import 引入外部的 CSS 文件，适用于全局样式或大型项目。
import './styles.css';
const MyComponent = () => {
return <div className="my-class">Hello World</div>;
};CSS Modules CSS Modules 提供局部作用域的样式，避免类名冲突。
import styles from './styles.module.css';
const MyComponent = () => {
return <div className={styles.myClass}>Hello World</div>;
};Styled-components
使用 styled-components 库，可以直接在 JavaScript 中编写 CSS。
import styled from 'styled-components';
const StyledDiv = styled.div`
color: blue;
font-size: 16px;
`;
const MyComponent = () => {
return <StyledDiv>Hello World</StyledDiv>;
};Sass/SCSS
通过安装 sass 依赖，可以在项目中使用 Sass 或 SCSS。
import './styles.scss';
const MyComponent = () => {
return <div className="my-class">Hello World</div>;
};Tailwind CSS 使用 Tailwind CSS 可以通过类名快速应用样式。
const MyComponent = () => {
return <div className="text-blue-500 text-lg">Hello World</div>;
};选择建议
- 简单项目：内联样式或外部 CSS 文件。
- 组件化开发：CSS Modules 或 styled-components。
- 大型项目：Sass/SCSS 或 Tailwind CSS。
