【 React 】React 中引入css的方式有哪几种？区别？

在React中引入CSS有几种方式：

1. 使用传统的CSS文件：

   创建一个CSS文件，并在React组件中引入这个CSS文件。

import './App.css';
 
function App() {
  return (
    <div className="App">
      <h1>Hello, World!</h1>
    </div>
  );
}
 
export default App;

2. 使用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;

3. 内联样式：

   直接在JSX元素上应用内联样式。

function App() {
  const style = {
    color: 'blue',
    fontSize: '24px'
  };
 
  return (
    <div>
      <h1 style={style}>Hello, World!</h1>
    </div>
  );
}
 
export default App;

4. 使用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;

5. 使用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);

每种方法都有其优点和用途，你可以根据项目需求和个人喜好来选择适合的方式。