标签：表示 after str 运用 false 样式 方式 line raw
事实上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 (
<>
<div style={{ color: ‘lightblue‘, fontSize: ‘20px‘ }}>行内样式</div>
<div style={divStyle}>可以用到state</div>
</>
)
}
}
ReactDOM.render(<App />, 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 (
<>
<div className=‘common‘>普通css引入</div>
</>
)
}
}
ReactDOM.render(<App />, 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 (
<>
<h2 className={appStyle.color}>我是App组件</h2>
</>
)
}
}
ReactDOM.render(<App />, 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.div`
height:300px;
width:300px;
background:pink;
/* 1.可以进行样式的嵌套 */
span{
color:yellow;
/* 2.&的使用，表示即是span元素也要有active属性 */
&.active{
color:white;
}
}
`
export const DemoWrapperH3 = styled.h3`
color: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.button`
color: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设置主题
<ThemeProvider theme={{ fontSize: ‘16px‘ }}>
<DemoWrapperDiv>
<DemoWrapperH3>使用styled-components</DemoWrapperH3>
<span>样式嵌套1</span><br />
<span className="active">样式嵌套2</span><br />
<DemoWrapperH3 >支持伪类</DemoWrapperH3>
< StyledInput
style={{ height: ‘25px‘, width: ‘200px‘ }}
// 传入state作为props属性，结合上文可动态修改css样式
color={this.state.color} /><br />
<StyledButton>button</StyledButton>
<StylePrimaryButton>primary button</StylePrimaryButton>
</DemoWrapperDiv>
</ThemeProvider>
)
}
}
ReactDOM.render(<App />, 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 (
<div>
{/* 原生React中添加class方法 */}
{/* 使用运算符，进行字符串拼接，要注意空格的问题 */ }
<h2 className={"title " + (isActive ? "active" : "")}>我是标题2</h2>
<h2 className={["title", (isActive ? "active" : "")].join(" ")}>我是标题3</h2>
{/* 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>
)
}
}
标签：表示 after str 运用 false 样式 方式 line raw
原文地址：https://www.cnblogs.com/davina123/p/13802761.html
