1.css模块化
我们在用React开发项目的时候,我们给标签添加样式的方式有多种。这里我们主要说内联样式和样式表,以及模块样式。
1.内联样式
我们可以直接在标签内直接添加style属性
javascript
import React, {useState} from 'react';
import './App.css';
const App = () => {
return (
<div>
<p style={{textAlign:'center',fontSize:'8px'}}>我是一个段落</p>
<button style={{backgroundColor:'red',border:'none'}}>点我一下</button>
</div>
);
};
export default App;
但是这样如果样式多的话很难去维护,看起来也会很不友好,不宜用理解。
2.样式表
我们就可以

每个组件单独创建css文件,然后
javascript
import React, {useState} from 'react';
import './App.css';
const App = () => {
const [redBorder, setRedBorder] = useState(true);
// const pStyle = {
// color: 'red',
// backgroundColor: '#bfa',
// border: redBorder ? "red solid 1px" : "blue solid 1px"
// };
const clickHandler = () => {
setRedBorder(false);
};
return (
<div>
<p className={p1 ${redBorder?'':'blueBorder'}}>我是一个段落</p>
<button onClick={clickHandler}>点我一下</button>
</div>
);
};
export default App;
[图片]
引入就可以直接使用了,但是这种引入的话会导致类名全部暴露在全局中。会出现一些问题。

javascript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>
);
如果类名重复,那么就会出现冲突,后面引入的就会覆盖到前面的,这样类名就需要非常谨慎,但是开发往往很多人一起开发的。所有容易出现这些问题,我们就需要用样式模块化。
3.模块化css
我们只需要在创建css文件加上module就可以模块化css了。react会自动识别模块css。
javascript
import React from 'react';
import classes from "./A.module.css";
const A = () => {
return (
<div>
<p className={classes.p1}>我是A组件</p>
</div>
);
};
export default A;
引入的时候就需要和组件引入一样了。需要起一个名字classes这个随便,然后相当于把模块css作为对象引入,然后classes.p1就可以使用了。
javascript
import React, {useState} from 'react';
import classes from './App.module.css';
import A from "./A";
const App = () => {
/*
* CSS模块
* 使用步骤:
* 1.创建一个xxx.module.css
* 2.在组件中引入css
* import classes from './App.module.css';
* 3.通过classes来设置类
* className={classes.p1}
* CSS模块可以动态的设置唯一的class值
* App_p1__9v2n6
* */
const [showBorder, setShowBorder] = useState(false);
const clickHandler = () => {
setShowBorder(true);
};
return (
<div>
<A/>
<p className={${classes.p1} ${showBorder ? classes.Border : ''}}>我是一个段落</p>
<button onClick={clickHandler}>点我一下</button>
</div>
);
};
export default App;
这里虽然类名一样,但是css模块对动态添加唯一的class值,比如App.module.css就是有App作为前缀而且后面会随机跟一些hash值,这样很好的避免样式冲突问题。
2.rem布局
我们在用电脑端去开发移动端项目的时候,手机根据型号牌子导致宽度不同,那么我们就无法用单纯的px去指定文字或者图片大小,因为会写死,我们想要我们的htmlcss的宽度高度根据当前页面宽度去动态的调整,这时候就需要用rem这个相对数值了。
javascript
html {
font-size: 26vw;
}
/*
当前屏幕最大为372px
100vw = 375px
我们希望100vw就是 a = 100px
我们分成26.666667分每一份就是100px
如果是414px
分成26.66667个每一份就会大于100px
*/
/* rem是根据html */
.p1 {
/* font-size: 16px; /
font-size: 0.16rem;
* /* 那么现在1rem就是100px也就是可以等比例放大了 /
* /* 换成414px就会等比例大一点 */
te
}
/* 我们的px单位是绝对数值,我们直接定义字体大小是16px无论什么设备都会是16px */
/* rem是相对单位,相对于根元素的fontsize大小比如这里我们设置16px,那么子元素的1rem就是16px 2rem就是32px*/
/* 但是想要rem可以实现等比例放大那么html就需要动态的计算fontsize值 */
/* 我们可以使用vw这个单位 vw也是一个相对单位,这里我们100vw相当于把屏幕分成100份 */
当我们用16px指定文字大小,不管我们如何改变视口,都会是16px。因为是绝对数值,rem是相对数值,会根据根元素的fontsize大小比如这里我们设置16px,也就是html的fontsize是16px,那么我们子元素设置1rem就是16px。但是我们的根元素写死了..........rem也就是死的。所有我们需要把这两个都动态的进行设置数值。
我们根元素需要用vw这个相对单位。比如我们这样写了26vw,那么不管当前视口宽度是多岁,都会被分为100份,那么1rem转化为px对应的就是这100份乘以26,我们最理想的情况就是让1rem=100px,也就是1rem就是26份(一共是100份),这样就不用考虑视口的宽度了,反正我们永远按照这个比例去设置。这也就是rem布局去兼容移动端的原理。