react 类组件 如何写样式 代码

React 类组件可以使用多种方式来写样式，以下是其中的一些常用方式：

1. 在组件中使用内联样式

可以通过style属性给元素添加内联样式，如下所示：

class MyComponent extends React.Component {
  render() {
    const style = {
      backgroundColor: 'red',
      color: 'white',
      padding: '10px',
      borderRadius: '5px'
    };

    return (
      <div style={style}>
        This is my component
      </div>
    );
  }
}

2. 使用 CSS 模块化

在 React 中，可以使用 CSS 模块化来避免样式冲突的问题。使用 CSS 模块化，需要在组件中引入样式文件，并使用类名来引用样式，如下所示：

import styles from './MyComponent.module.css';

class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.container}>
        This is my component
      </div>
    );
  }
}

3. 使用 CSS-in-JS 库

React 中还有很多 CSS-in-JS 库可以使用，例如 styled-components、Emotion 等。使用这些库，可以直接在组件中编写样式，如下所示：

import styled from 'styled-components';

const Container = styled.div`
  background-color: red;
  color: white;
  padding: 10px;
  border-radius: 5px;
`;

class MyComponent extends React.Component {
  render() {
    return (
      <Container>
        This is my component
      </Container>
    );
  }
}