react中处理样式的五种方式:
1)行内样式
<h1 style={ {"fontSize":"20px"} }>首页面</h1>
注意:
1)如果CSS中的是中划线命名,需要换成小驼峰命名
2)属性名可以使用双引号包起来,也可以不包
3)style后面要写两个{{}}
2)外部样式
import "./App.css"
3)CSS的模块化
- CSS的模块化命名必须是xxx.module.css
- xxx.module.css中的代码如下:.
.error{
color: red;
font-weight: bold;
}
- 使用:
1、引入
import common from "./css/common.module.css"
2、使用<h1 className={ common.error }>错误信息</h1>
4)根据不同的条件添加不同的样式
参考:https://www.npmjs.com/package/classnames
- 安装:
npm i classnames
- 引入:
import classNames from "classnames"
- 使用:
import React, { Component } from 'react'
import classNames from "classnames"
// 引入外部样式
import "./App.css"
export default class App extends Component {
render() {
let h1Class = classNames({
'Box1':true,
'Box2':true
})
return (
<div className="container">
<h1 className={ h1Class }>这是一个盒子</h1>
</div>
)
}
}
5)css-in-js
安装:npm i styled-components -S
使用:
1、创建一个Search_style.js的文件夹,代码如下:
import styled from "styled-components"
// 创建一个 Container 组件,它将渲染一个附加了样式的 <div> 标签
let Container = styled.div`
width:500px;
height:500px;
background:${ (props)=>props.color };
font-size:30px;
h1{
color:blue
}
`
export {
Container
}
2、在需要使用的地方先引入该组件,然后当成标签使用,代码如下:
import React, { Component } from 'react'
import { Container } from "./Search_style"
export default class Search extends Component {
render() {
return (
<Container color='gold'>
<h1>Helo React~</h1>
</Container>
)
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。