在使用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污染全局的问题。
粉丝
0
关注
0
收藏
0