做足球原创短视频网站,镇江住房建设网站,动漫设计工作室网站推广方法,株洲营销网站建设一#xff1a;问题#xff1a;
在 vue 项目中#xff0c;我们书写css的方式很简单#xff0c;就是在 .vue文件中写style标签#xff0c;然后加上scope属性#xff0c;就可以隔离当前组件的样式#xff0c;但是在react中#xff0c;是没有这个东西的#xff0c;如果直…一问题
在 vue 项目中我们书写css的方式很简单就是在 .vue文件中写style标签然后加上scope属性就可以隔离当前组件的样式但是在react中是没有这个东西的如果直接引入css文件很可能会导致样式覆盖的问题。
二常见书写css方法
1.直接引入css文件
可以创建一个普通的 .css 文件并在组件中导入它。这是最传统和简单的方法。但是这种很容易出现样式覆盖的问题所以可以加一些特殊的标识之类的做区分 css文件
.login-example {color: blue;font-size: 20px;
}jsx文件
import React from react;
import ./styles.css;const MyComponent () (div classNamelogin-exampleHello, world!/div
);export default MyComponent;给每个页面加一个特殊的名称适用于页面不多的情况。
2.行内样式
在 React 中也可以使用内联样式
import React from react;const MyComponent () (div style{{ color: blue, fontSize: 20px }}Hello, world!/div
);export default MyComponent;直接书写行内样式通常只用于一些很简单的样式或者需要动态计算样式的情况通篇使用内联样式是不可取的。
3.CSS Modules
CSS Modules 可以将 CSS 作用域限制在单个组件内避免全局污染。 步骤
(1). 创建一个 CSS Module 文件文件名格式为 *.module.css例如 styles.module.css
.example {color: blue;font-size: 20px;
}(2). 在 React 组件中导入这个 CSS Module 文件:
import React from react;
import styles from ./styles.module.css;const MyComponent () (div className{styles.example}Hello, world!/div
);export default MyComponent;效果如下 可以看到这里的div的class给了哈希值就避免了全局污染。
4. 第三方插件
也有许多第三方插件可以供我们使用像 Styled Components下面是styled components的用法
import React from react;
import styled from styled-components;const Example styled.divcolor: blue;font-size: 20px;
;const MyComponent () (ExampleHello, world!/Example
);export default MyComponent;以上就是常用的在react中书写css的方法
