1. 内联样式
最简单的方式是直接在React组件中使用style属性来定义CSS样式。这种方式适用于只需要为单个组件添加一些简单的样式的情况。
const MyComponent = () => {
return <div style={{ color: 'red', fontSize: '20px' }}>Hello, World!</div>;
};2. 外部CSS文件
另一种常见的方式是将CSS样式写在一个单独的文件中，然后在React组件中使用import语句来引入该文件。这种方式适用于需要为多个组件共享相同样式的情况。
首先，创建一个名为App.css的CSS文件：
/* App.css */
.my-component {
color: red;
font-size: 20px;
}然后，在React组件中使用import语句来引入该文件：
import React from 'react';
import './App.css'; // 引入CSS文件
const MyComponent = () => {
return <div className="my-component">Hello, World!</div>;
};3. CSS模块
CSS模块是一种将CSS类名与JavaScript模块进行绑定的方式。它允许你使用CSS类名作为变量，从而避免类名冲突的问题。要使用CSS模块，你需要先安装css-loader和style-loader这两个Webpack插件。
首先，创建一个名为App.module.css的CSS文件：
/* App.module.css */
.my-component {
color: red;
font-size: 20px;
}然后，在React组件中使用import语句来引入该文件：
import React from 'react';
import styles from './App.module.css'; // 引入CSS模块
const MyComponent = () => {
return <div className={styles.myComponent}>Hello, World!</div>; // 使用CSS模块中的类名
};4. CSS-in-JS库（如styled-components）
最后，还有一种方式是使用CSS-in-JS库，这些库允许你在JavaScript代码中编写CSS样式。其中最常用的是styled-components库。要使用styled-components，你需要先安装该库：
npm install styled-components --save然后，在React组件中使用styled-components来定义样式：
import React from 'react';
import styled from 'styled-components'; // 引入styled-components库
const MyComponent = () => {
const StyledDiv = styled.div` // 使用styled-components定义样式
color: red;
font-size: 20px;
`;
return <StyledDiv>Hello, World!</StyledDiv>; // 使用定义好的样式组件
};原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/127900.html
微信扫一扫 