使用内联样式

将样式直接写在组件标签中，可以通过props传入动态参数。

const myStyle = {
  color: 'blue',
  backgroundColor: 'lightgrey',
  padding: '10px'
};

function MyComponent(props) {
  return (
    

      {props.children}
    
  );
}

ReactDOM.render(
  Hello World!,
  document.getElementById('root')
);

该段代码定义了一个MyComponent组件，样式由myStyle对象定义，组件中使用了style属性将样式引入。

使用外部CSS文件

可以将样式写在外部的CSS文件中，并在组件中引入。这种方式允许我们在多个组件中共享同样的样式。

//index.css
.myStyle {
  color: blue;
  background-color: lightgrey;
  padding: 10px;
}

//MyComponent.js
import React from 'react';
import './index.css';

function MyComponent(props) {
  return (
    

      {props.children}
    
  );
}

export default MyComponent;

该段代码使用了CSS文件定义了.myStyle样式，组件中使用className属性将样式引入。

使用CSS模块化方案

CSS模块化方案允许我们将CSS样式表文件模块化，每个模块有自己独立的作用域，避免了全局CSS污染。

//MyComponent.module.css
.myStyle {
  color: blue;
  background-color: lightgrey;
  padding: 10px;
}

//MyComponent.js
import React from 'react';
import styles from './MyComponent.module.css';

function MyComponent(props) {
  return (
    

      {props.children}
    
  );
}

export default MyComponent;

该段代码使用了CSS模块化方案，样式表被定义在MyComponent.module.css文件中，使用import引入。然后使用styles对象来引用样式，通过className属性引入。

使用第三方CSS框架

React中使用第三方CSS框架和普通的HTML一样简单直观。

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function MyComponent(props) {
  return (
    

      
{props.title}
      
{props.content}
    
  );
}

export default MyComponent;

该段代码使用了Bootstrap框架，引入了bootstrap.min.css文件，然后使用Bootstrap提供的class属性来继承框架中的样式。