React中如何使用scss
作者:小火车况且况且
这篇文章主要介绍了React中如何使用scss问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
React中使用scss
首先导入node-sass
npm i node-sass -D
编写样式文件header.scss
, header.module.scss
两个样式文件一样,只是文件名不同
.header-box { display: flex; div { font-size: 60px; } }
导入样式文件import './styles/header.scss'
import React from 'react' import from './styles/header.module.scss' export default class HeaderDom extends React.Component { constructor() { super() } render() { return ( <div className='header-box'> <div>Hello World</div> </div> ) } }
结果
React
中使用scss
加上scoped
导入样式文件
import headerStyle from './styles/header.module.scss'
import React from 'react' import headerStyle from './styles/header.module.scss' export default class HeaderDom extends React.Component { constructor() { super() console.log(headerStyle) } render() { return ( <div className={ headerStyle['header-box']}> <div>Hello World</div> </div> ) } }
结果 在普通的样式上面添加了唯一值
React中写scss样式
写样式
最外层写.root类名
里面有:global包裹
再写具体的类型 写具体的样式
.root { height: 100%; :global { .content { position: relative; z-index: 1; height: 100%; } }
使用样式
先引入样式文件import styles from './index.module.scss'
最外层的div里面写className="styles.root"
后面的类名写具体的类名就行
例子:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。