在React中引入CSS有几种方式：
使用传统的CSS文件：
创建一个CSS文件，并在React组件中引入这个CSS文件。
import './App.css';
function App() {
return (
<div className="App">
<h1>Hello, World!</h1>
</div>
);
}
export default App;使用CSS模块：
通过在CSS文件中使用CSS模块，你可以创建局部作用域的CSS，避免类名冲突。
// App.module.css
.text {
color: blue;
}
// App.js
import styles from './App.module.css';
function App() {
return (
<div>
<h1 className={styles.text}>Hello, World!</h1>
</div>
);
}
export default App;内联样式：
直接在JSX元素上应用内联样式。
function App() {
const style = {
color: 'blue',
fontSize: '24px'
};
return (
<div>
<h1 style={style}>Hello, World!</h1>
</div>
);
}
export default App;使用styled-components：
使用第三方库styled-components来创建组件级别的样式。
import styled from 'styled-components';
const StyledDiv = styled.div`
color: blue;
font-size: 24px;
`;
function App() {
return (
<StyledDiv>
Hello, World!
</StyledDiv>
);
}
export default App;使用radium库：
使用radium库可以将CSS样式直接应用于JavaScript变量。
import Radium from 'radium';
let styles = {
base: {
color: '#000',
':hover': {
color: '#fff'
}
}
};
class App extends React.Component {
render() {
return <div style={styles.base}>Hello, World!</div>;
}
}
export default Radium(App);每种方法都有其优点和用途，你可以根据项目需求和个人喜好来选择适合的方式。