[分享]css不能在组件中编写吗

在使用React开发网页应用时，我们经常会使用组件来实现页面的不同部分。而在编写组件时，我们会使用HTML、JavaScript和CSS来完成不同的功能。然而，有些开发者会发现他们不能在组件中编写CS...

在使用React开发网页应用时，我们经常会使用组件来实现页面的不同部分。而在编写组件时，我们会使用HTML、JavaScript和CSS来完成不同的功能。然而，有些开发者会发现他们不能在组件中编写CSS，那是为什么呢？

class MyComponent extends React.Component {
  render() {
    return (
      <div style={{ color: 'red' }}>
        This is my component
      </div>
    );
  }
} 

我们在上述代码中尝试给组件添加了CSS，但是事实上，这并不是真正的CSS。实际上，我们使用了JavaScript来设置组件的样式，这就是为什么我们使用了双大括号。

所以，我们不能在组件中编写真正的CSS。我们需要使用CSS Modules、Sass、Less等来编写CSS，并将它们导入到组件中。这样，我们可以使用单独的文件来管理CSS样式，并且可以避免CSS污染全局的问题。

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

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

在上面的示例中，我们使用了CSS Modules导入了一个名为‘MyComponent.module.css’的文件，并将它应用到了组件的类名（className）上。

总之，在React的组件中，我们不能直接编写CSS样式。我们需要将CSS样式导入到组件中，并将其作为类名应用到组件的元素上。这样，我们可以更好地管理CSS样式，并且可以避免CSS污染全局的问题。