推荐课程:前端开发工程师--学习猿地精品课程
事实上react官方并没有关于样式写法的统一说法,能在react中使用样式的方法有很多,下面分别来介绍以下几种:
一、内联样式
style接受一个采用驼峰命名属性的js对象,而不是css字符串,它可以引用state中的状态来设置相关样式,是一种最基本的写法。内联样式中,样式之间不会有冲突,但是所有的写法都需要使用小驼峰标识,这样的写法在代码中存在的大量的样式,看起来十分的混乱,而且像伪类,伪元素它们是无法进行编写的。
import React from ‘react‘
import ReactDOM from ‘react-dom‘
class App extends React.Component {
constructor(props) {
super(props);
this.state = { color: "purple" }
}
render() {
const divStyle = {
//动态的来获取
color: this.state.color,
textDecoration: "underline"
}
return (
<>
</>
)
}
}
ReactDOM.render(, document.getElementById(‘root‘))
二、引入样式
即把css样式写到一个单独文件,之后再进行引入。这种方式和网页开发中编写方式是一致的,我们比较熟悉,但是这种写法样式之间会相互影响存在相互层叠的风险。
// css文件
.common{
color: purple;
text-decoration: underline;
}
// index.js文件
import React from ‘react‘
import ReactDOM from ‘react-dom‘
import ‘./style.css‘
class App extends React.Component {
render() {
return (
<>
</>
)
}
}
ReactDOM.render(, document.getElementById(‘root‘))
三、css Modules
这一种方式它主要是利用配置将.css文件进行编译,编译后在每个使用css的地方,css类名都是独一无二,不会和其它的冲突。css Modules它并不是react中特有的解决方案,而是所有使用了类似于webpack配置环境下都可以使用。react的脚手架已经内置了css Modules的配置即:.css/.less等样式文件都修改成了.module.css/.module.less。但如果在其它的项目中使用css Modules就需要我们自己来配置webpack.config.js将其中的modules设置为true。
// App-style.module.css文件 一定要注意名称后.module
.color{
color: lightblue;
}
// demo.js文件
import React from ‘react‘
import ReactDOM from ‘react-dom‘
import appStyle from ‘./App-style.module.css‘
class App extends React.Component {
render() {
return (
<>
我是App组件
</>
)
}
}
ReactDOM.render(, document.getElementById(‘root‘))
但这种方式也有其自身的局限性,引用类名时不能使用连接符,如.app-style,它在js中是不识别的;所有的className都要用到className={style.className}的形成来编写,也不能动态的修改某些样式,依然还是要使用到内联样式。但是这种方法解决了局部作用域的问题,也有很多人喜欢用这种方式编写css。
四、styled Components
说到styled Components第三方库首先要提的是“CSS-in-JS”。指的是一种模式,它是将css也写入到js中而不是在外部文件中定义。在传统的前端开发中,我们奉行结构,样式,逻辑三者相分离,随着前端开发日益复杂,组件化思想,在react中它认为逻辑本身和UI无法分离,样式也属于UI的一部分,所以有了all in js的思想,虽然这样思想受到了许多的批评,但有一些css-in-js库,其功能十分方便,强大,其中最为出名的就是styled-components,其它的还有emotion、glamorous等。
使用styled-components。由于它是第三方库,在react官方中并没有定义,所以使用前必须安装: yarn add styled-components。它本质上是通过函数的调用创建出一个组件,这个组件会被添加上一个不重复的class,styled-components会给这个class添加上相应的样式。它主要运用了带标签的模板字符串的相关知识,在正常情况下我们都是通过函数名()的方式对函数进行调用,但还可以通过模板字符串(``)对函数进行调用,如果我们在调用时插入了其它的变量,那模板字符串被拆分了,标签函数的第一个参数是被模板字符串拆分的字符串组合的数组,其它元素是模板字符串传入的内容。
function getPerInfo(part1, part2, part3) { console.log(part1, part2, part3); //[" my name is ", " , ", " years old", raw: Array(3)] "davina" 20 } const person = ‘davina‘, age = 20; getPerInfo` my name is ${person} , ${age} years old`
// StyledComponent.js文件
//使用步骤:1.导入 名字可以随便的起这里是styled
import styled, { isStyledComponent } from ‘styled-components‘;
//这里进行导出,在demo.js里使用,主要用到的标签模板字符串相关知识
export const DemoWrapperDiv = styled.divheight:300px;
width:300px;
background:pink;
/* 1.可以进行样式的嵌套 */
span{
color:yellow;
/* 2.&的使用,表示即是span元素也要有active属性 */
&.active{
color:white;
}
}
export const DemoWrapperH3 = styled.h3color:red;
/* 3.可以添加伪类,伪元素 */
&:hover{
color:orange;
font-size:20px;
}
&::after{
content: "好看"
}
// 4.attrs是一个函数,它传入一个对象,返回一个函数
export const StyledInput = styled.input.attrs({
placeholder: "百度一下",
bColor: ‘#c6c9cb‘,
})background-color: lightblue;
/* 5.props具有穿透性 */
border-color: ${props => props.bColor};
/* 6.动态设置css样式 */
color: ${props => props.color};
export const StyledButton = styled.buttoncolor:pink;
margin:5px;
background:lightblue;
border:2px solid #a9a9ee;
// 7.styled-components具有继承性
export const StylePrimaryButton = styled(StyledButton)color:purple;
/* 8.可以使用共享 */
font-size:${props=>props.theme.fontSize};
// demo.js文件
import React from ‘react‘
import ReactDOM from ‘react-dom‘
import { DemoWrapperDiv, DemoWrapperH3, StyledInput, StyledButton, StylePrimaryButton } from ‘./styledComponents‘
import { ThemeProvider } from ‘styled-components‘;
class App extends React.Component {
constructor(props) {
super(props);
this.state = { color: "seagreen" }
}
render() {
return (
// 2.进行使用
// 使用ThemeProvider设置主题
使用styled-components
样式嵌套1
样式嵌套2
支持伪类
< StyledInput
style={{ height: ‘25px‘, width: ‘200px‘ }}
// 传入state作为props属性,结合上文可动态修改css样式
color={this.state.color} />
button
primary button
)
}
}
ReactDOM.render(, document.getElementById(‘root‘))
五、 classnames库
react中添加class用到className来代替class,除了className还可以用到classnames这个第三方库,classnames它其实是一个函数,用它可以很方便为元素添加class属性,动态的判断是否为组件添加类名。它是一个第三方库,使用前要先进行安装 yarn add classnames/npm i classnames --save。使用方式如下:
import React, { PureComponent } from ‘react‘
import classNames from ‘classnames‘
export default class App extends PureComponent {
constructor(props) {
super(props)
this.state = {
isActive: true,
}
}
render() {
let isActive = this.state,
isBar = false,
errClass = ‘error‘,
warnClass = 0;//注意后面如果加上的是undefined,null,0时,不会添加
return (
{/ 原生React中添加class方法 /}
{/ 使用运算符,进行字符串拼接,要注意空格的问题 / }
我是标题2
我是标题3
{/* classnames库添加class */} {/* 直接进行调用,它返回的是一个字符串 */} <h2 className={classNames("foo", "bar", "active", "title")}>我是标题</h2> {/* 它后面可以加上一个对象(键值对),后面也可以加上对象 */} <h2 className={classNames({ "active": isActive, "bar": isBar }, "title")}>我是标题</h2> {/* 把多个传入的东西,写到一起 */} <h2 className={classNames("foo", errClass, warnClass, { "active": isActive })}>我是标题</h2> {/* 数组 */} <h2 className={classNames(["active", "title"])}>我是标题</h2> <h2 className={classNames(["active", "title", { "bar": isBar }])}>我是标题</h2> </div> ) }
}
react学习之css样式和动画
标签:表示 after str 运用 false 样式 方式 line raw
© 著作权归作者所有
发表评论