css模块化以及rem布局
1.css模块化
我们在用React开发项目的时候，我们给标签添加样式的方式有多种。这里我们主要说内联样式和样式表，以及模块样式。
1.内联样式
我们可以直接在标签内直接添加style属性
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文件，然后
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;
[图片]
引入就可以直接使用了，但是这种引入的话会导致类名全部暴露在全局中。会出现一些问题。
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。
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就可以使用了。
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这个相对数值了。
html {font-size: 26vw;
}/*当前屏幕最大为372px100vw = 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布局去兼容移动端的原理。