网站 固定ip,网站网站开发教程,小制作小发明手工图片,mt7620a做网站文章目录 引用方式第一种#xff1a;内联方式第二种#xff1a;在组件引用 [name] .css文件第三种#xff1a;在组件中引用[name] .scss文件第四种#xff1a;在组件中引用[name].module.css文件 写法三种内联写法三元表达式引用module.css 引用方式
第一种#xff1a;内… 文章目录 引用方式第一种内联方式第二种在组件引用 [name] .css文件第三种在组件中引用[name] .scss文件第四种在组件中引用[name].module.css文件 写法三种内联写法三元表达式引用module.css 引用方式
第一种内联方式
可以使用变量或者传统的内联方式
优点: 只生效于当前组件
缺点: 可能产生大量重复代码import react, { Component } from react;const sty {width: 100px,backgroundColor: #FFFFFF, //注意需要使用驼峰法boxSizing: border-box
};class Test extends Component {constructor(props, context) {super(props);}render() {return (div style{sty}123/divdiv stylebackground-color:red;);}
}export default Test;第二种在组件引用 [name] .css文件
优点: 复用性强
缺点: 存在样式覆盖问题不是只生效于当前组件import React, { Component } from react;
import TestChidren from ./TestChidren;
import /assets/css/index.scss;
// styName写在 /assets/css/index.scss 中即可class Test extends Component {constructor(props, context) {super(props);}render() {return (divdiv classNamestyName123/divTestChidren测试子组件的样式/TestChidren/div);}
}
export default Test;第三种在组件中引用[name] .scss文件
安装node-sass就可以因为有个node-sassscss文件才能在node环境上编译成css文件。 然后编写scss文件
.App{background-color: #282c34;.header{min-height: 100vh;color: white;}
}第四种在组件中引用[name].module.css文件
优点: 可实现CSS的局部作用域并且可复用重点
1、选择器驼峰命名
2、样式文件后缀名为.module.css
3、在js文件中导入并使用注
1、css modules会默认给类名加上一个唯一标识符哈希字符串从而实现类名不重复
2、class名称需要使用驼峰命名不支持 - 等连接符命名规则: xxx.module.css引入方式import xxx from xxx.module.css用法div className{xxx.styleName}
写法
三种内联写法
class App extends PureComponent{constructor(props) {super(props);/* 动态改变元素样式 */this.state {textColor:pink}}render(){/* 将样式抽取到一个变量中 */const h2Style{fontSize:18px,color:red}return(divh2 style{h2Style}这是一个App组件/h2p style{{fontSize:18px,color:red}}这是一段文字/pdiv style{{color:this.state.textColor}}这是一段动态变化的文字/div/div)}
}三元表达式
divh2 className{title (isActive ? active: )}内容/h2h2 className{[title, (isActive ? active: )].join( )}内容/h2
/div引用module.css
import appStyle from ./style.module.css;
import common from ./common.module.css;
// 单个class
h2 className{appStyle.title}内容
/h2
// 多个class
div className{appStyle.box6 common.flexRow common.justifyBetween}内容
/div
