react 6种方式编写样式

在React中，编写样式主要有以下几种方式：

1. 内联样式：

直接在React组件中使用style属性来定义样式。这种方式比较适合定义动态的样式，因为它允许你将JavaScript表达式作为样式的值。

2. 外部样式表

：通过创建外部的CSS文件，并在React组件中引入这些文件来定义样式。这种方式比较适合定义静态的、可复用的样式。

3. CSS Modules：

这是一种将CSS类名局部化的技术，可以有效避免类名冲突的问题。通过创建.module.css文件，并在React组件中引入这个文件，你可以使用模块化的CSS类名来定义样式。

4. Styled Components：

这是一个流行的CSS-in-JS库，允许你以组件化的方式编写CSS。通过创建styled组件，你可以将样式和组件逻辑紧密结合在一起，实现高度可定制化的样式。

5. Emotion：

这是另一个CSS-in-JS库，与Styled Components类似，但提供了更多的灵活性和可扩展性。Emotion支持多种语法，包括对象样式、模板字符串样式和CSS样式表，可以满足不同的编写需求。

6. Radium：

这是一个用于React的内联样式库，提供了更多的功能和便利性。除了支持基本的内联样式外，Radium还支持伪类和媒体查询等高级特性，可以让你更方便地管理样式。

需要注意的是，以上方式并不是互斥的，你可以根据项目的需求和个人的偏好选择适合的方式来编写样式。同时，React社区还在不断发展，可能会有新的样式编写方式出现。

另外，对于大型项目和团队，可能会采用多种样式编写方式相结合的策略，以实现更好的可维护性和可扩展性。例如，可以使用外部样式表来定义全局的、共享的样式，而使用CSS-in-JS库来定义组件级别的、高度定制的样式。

下面详细代码示例

下面我将针对上面提到的6种方式给出详细的代码示例：

1. 内联样式

function MyComponent() {
  const myStyle = {
    color: 'blue',
    backgroundColor: 'lightgrey',
    padding: '10px',
    borderRadius: '5px'
  };

  return <div style={myStyle}>This is an inline styled div.</div>;
}

2. 外部样式表

假设你有一个App.css文件：

/* App.css */
.my-class {
  color: green;
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

然后在React组件中引入并使用：

import React from 'react';
import './App.css'; // 引入外部样式表

function App() {
  return <div className="my-class">This div uses external CSS.</div>;
}

export default App;

3. CSS Modules

假设你有一个MyComponent.module.css文件：

/* MyComponent.module.css */
.myStyledDiv {
  color: purple;
  background-color: pink;
  padding: 15px;
  border: 1px solid black;
}

然后在React组件中引入并使用：

import React from 'react';
import styles from './MyComponent.module.css'; // 引入CSS Module

function MyComponent() {
  return <div className={styles.myStyledDiv}>This div uses CSS Modules.</div>;
}

export default MyComponent;

4. Styled Components

首先，你需要安装styled-components库：

npm install styled-components

然后编写组件：

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  color: orange;
  background-color: white;
  padding: 25px;
  border: 2px dashed black;
`;

function MyStyledComponent() {
  return <StyledDiv>This div uses Styled Components.</StyledDiv>;
}

export default MyStyledComponent;

5. Emotion

首先，你需要安装@emotion/react和@emotion/styled库：

npm install @emotion/react @emotion/styled

然后编写组件：

import React from 'react';
import styled from '@emotion/styled';

const StyledDiv = styled.div`
  color: brown;
  background-color: lightgreen;
  padding: 10px 20px;
  border: 1px solid darkgrey;
`;

function MyEmotionComponent() {
  return <StyledDiv>This div uses Emotion.</StyledDiv>;
}

export default MyEmotionComponent;

6. Radium

首先，你需要安装radium库：

npm install radium

然后编写组件：

import React from 'react';
import Radium from 'radium';

const MyStyledDiv = Radium(React.createClass({
  render() {
    return (
      <div style={[
        styles.base,
        styles.primary
      ]}>
        This div uses Radium.
      </div>
    );
  }
}));

const styles = {
  base: {
    color: '#fff',
    padding: '20px',
    borderRadius: '4px'
  },
  primary: {
    backgroundColor: '#0074d9'
  }
};

function MyRadiumComponent() {
  return <MyStyledDiv />;
}

export default MyRadiumComponent;

请注意，上面的Radium示例使用了React.createClass，这是React早期的类组件创建方式，现在更推荐使用ES6的类语法或者函数组件与Hooks。不过，为了演示Radium的用法，这里仍然使用了React.createClass。在实际项目中，你应该会使用函数组件或者类组件与Radium结合。

Radium现在可能不是最流行的选择，因为React的生态系统已经发展了很多其他的CSS-in-JS库，并且React自身也在样式方面有所改进。不过，了解Radium仍然有助于理解CSS-in-JS的概念和用法。