ReactJs设置css样式的方法

ReactJs 中设置 CSS 样式有多种方法，下面将介绍几种常用的方法：

1. 内联样式

在 ReactJs 中，可以使用内联样式设置组件的样式。内联样式以对象形式定义，对象中的属性名必须为 camelCase 风格的字符串，而属性值则是字符串或者数字。

示例：

import React from 'react';

const MyComponent = () => {
  const style = {
    color: 'red',
    fontSize: 20,
  };

  return (
    <div style={style}>
      Hello, world!
    </div>
  );
};

export default MyComponent;

在上例中，通过 style 对象内联设置了组件 div 的样式，color 属性设置了字体颜色为红色，fontSize 属性设置了字体大小为 20 像素。

2. 外部样式表

除了内联样式，ReactJs 也支持通过引入外部样式表来设置组件的样式。外部样式表的使用与常规的 HTML 页面一样，只需在组件中使用 className 属性引用样式即可。

示例：

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

const MyComponent = () => {
  return (
    <div className="my-component">
      Hello, world!
    </div>
  );
};

export default MyComponent;

在上例中，通过 className 属性指定使用的样式表文件为 MyComponent.css，并在 div 标签上应用样式名 my-component，从而设置了组件的样式。

以上是 ReactJs 中设置 CSS 样式的两种常用方法，开发者可根据实际需要选择合适的方法。