react怎么引入css

前言：

在使用React开发应用程序时，我们经常需要引入CSS样式来美化我们的界面。React提供了几种不同的方式来引入CSS，使得我们能够根据需要选择最适合项目的方法。

方法一：使用内联样式

React允许我们使用内联样式来为组件设置样式。你可以通过一个JavaScript对象来定义样式，并将其赋值给组件的style属性。这种方式的好处是样式与组件直接关联，易于管理和维护。

import React from 'react';

const MyComponent = () => {
    const myStyle = {
        color: 'red',
        fontSize: '20px',
        // 更多样式属性
    };

    return (
        
Hello World
    );
};

export default MyComponent;

方法二：使用外部CSS文件

如果你希望使用外部CSS文件来管理和组织样式，你可以通过将CSS文件引入到React组件中来实现。在这种情况下，你需要在组件中使用className属性来指定CSS类名。

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

const MyComponent = () => {
    return (
        
Hello World
    );
};

export default MyComponent;

在上面的例子中，我们通过在组件中使用className属性并指定类名为"my-component"来引用外部CSS文件中的样式。

总结：

通过内联样式和外部CSS文件，我们可以很容易地引入样式到React组件中，实现界面美化。选择合适的方式取决于项目的需要和个人偏好。无论选择哪种方式，我们都可以灵活地应用样式，并充分发挥React的组件化特性。