React学习笔记(六)—— 使用css样式

在组件内使用样式
  • style样式语法:style={ {color:'red',fontSize:'25px'} } ,如果值是字符串类型的需要用引号包裹,如果是纯数字的可以不用引号包裹
  • 外部样式语法1:
const userstyle = { 
	header:{color:'red'},
	content:{margin:'10px'}
}
export default function Cmtitem(props) {
    return <div style={userstyle.header}>
       <p style={userstyle.content}>组件样式</p>
    </div>
}
  • 将样式抽离为单独的.js文件,并在组件中导入
使用外部单独的css样式文件
  • 运行:npm i style-loader css-loader -D安装style-loader和css-loader插件
  • 在webpack.config.js中找到module.exports = {},并输入一下代码配置
module:{
	rules:[ // 第三方匹配规则
	            {test:/\.css$/,use:['style-loader','css-loader']}    // 打包处理css样式表的第三方loader,从右向左来调用
	        ]
}
  • 在组件中导入组件,语法:
// 1、第一中导入方式,导入的样式表是全局生效的,在子组件页中可使用
import cssobj from 'css文件路径' 
  • 在组件内使用
// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
	render() {
	        return <div>
	            <h1 className="title">这是评论组件列表</h1>
	            {this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
	        </div>
	    }
}
  • 解决css模块化的问题,需要在webpack.config.js中找到module.exports = {},并输入下列第一块区域代码配置;在组件内引用代码如第二块代码区域所示
module:{
	rules:[ // 第三方匹配规则
				// css-loader通过?追究参数,其中modules表示普通的css样式表启用模块化
	            {test:/\.css$/,use:['style-loader','css-loader?modules']}    // 打包处理css样式表的第三方loader,从右向左来调用
	        ]
}
// css文件中有类选择器.title
export default class Cmtlist extends React.Component {
	render() {
	        return <div>
	            <h1 className={cssobj.title}>这是评论组件列表</h1>
	            {this.state.commentlist.map(item => <Cmtitem {...item}></Cmtitem>)}
	        </div>
	    }
}
  • 为标签添加多个类名,下列代码是使h1标签有.title.head两个类名
<h1 className={csobj.title+" "+csobj.head}>这是评论组件列表</h1>
  • 使某个类名不被模块化(类名由模块化转换为全局化),下列代码是使.title 类名全局化(被:global()包裹的类名是被全局化,而被:local()包裹的类名是模块化)
:global(.title){
	color:red;
}
  • 使用css中引用图片的问题,路径:background-image: url('/src/images/02.jpg') 从src这一层目录开始
使用第三方css模块文件(bootstrap等)
  • 使用npm安装bootstrap,引入语法:
// 引用路径:直接从bootstrap文件夹开始,不需要从node_modules这一层目录开始(可以省略)
import bootcss from 'bootstrap/dist/css/bootstrap.css'
  • 把自己的样式表定义为.scss文件,并对其启用模块化文件,去除自己的样式表的模块化(没必要模块化)
// 1、运行:npm i sass-loader node-sass -D 安装能够解析scss文件的loader
// 2、在webpack.config.js里面配置第三发模块匹配规则,module.exports = {}对象里面
module:{
   rules:[ 
   	 {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}
   ]
}	
  • 使用方法
<button className="btn btn-primary">按钮</button>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值