react 之样式的书写
内联样式的写法
- 使用内联颜色写法,对app进行添加颜色 和字体大小
- 可以结合state的数据,动态设置样式
- 无法使用伪类等
import React, { Component } from "react";
export default class App extends Component {
state = {
fontSize: 30,
};
render() {
const { fontSize } = this.state;
return (
<div>
<div style={{ color: "red", fontSize: fontSize + "px" }}>我是app</div>
</div>
);
}
}
普通的css
- 就是外部样式法,在外面创建一个.css 等样式文件,在引入即可
- import “./navbar.scss”
- 缺点:就是写的样式是全局的样式,也就是类名等会相互影响!
.nav-bar {
display: flex;
height: 44px;
line-height: 44px;
text-align: center;
}
.nav-bar .left, .nav-bar .right {
width: 80px;
background: red;
}
.nav-bar .center {
flex: 1;
background: blue;
}
import "./navbar.scss"
styled-components 推荐写法
- 安装:
yarn add styled-components
- 安装VScode插件提升css:
vscode-styled-components
- 作用:styled-components的本质是通过函数的调用,最终创建出一个组件
- 这个组件会被自动添加上一个不重复的class;
- styled-components会给该class添加相关的样式
简单的写法
import React, { Component } from "react";
import styled from 'styled-components';
const AppWrap = styled.div`
color: blue;
li {
color: pink;
font-size: 20px;
}
li:hover{
color: yellow;
}
`;
export default class App extends Component {
title = ["玄幻", "武侠", "校园"];
render() {
const title = this.title;
return (
<div>
<AppWrap >
<div>我是测试样式的</div>
<ul>
{
title.map(item => {
return <li>
{ item }
</li>
})
}
</ul>
</AppWrap>
</div>
);
}
}
简单写法抽离
son.jsx
import React from 'react';
import SonWrap from './Son_css';
export default function Son(props) {
return (
<SonWrap>
son
</SonWrap>
)
}
son_css.js
import styledComponents from 'styled-components';
const SonWrap = styledComponents.div`
color: #eee;
background: pink;
`
export default SonWrap
props、attrs属性
定义一个input组件
import React, { Component } from "react";
import styled from 'styled-components';
const XZLinput = styled.input`
color: orange;
&:focus{
color: red;
}
`
export default class App extends Component {
render() {
return (
<div>
<XZLinput type="text" placeholder="请输入"></XZLinput>
</div>
);
}
}
props可传递样式
- 读取样式:
color: ${props => props.color};
import React, { Component } from "react";
import styled from "styled-components";
const TestWrap = styled.div`
color: ${props => props.color};
font-weight: 900;
`;
render() {
return (
<div>
<TestWrap color="red">我是props</TestWrap>
</div>
);
}
}
attr添加内在属性
import React, { Component } from "react";
import styled from "styled-components";
const XZLinput = styled.input.attrs({
placeholder: "请填写密码",
paddingLeft: props => props.left || "5px"
})`
padding-left: ${props => props.paddingLeft};
color: orange;
&:focus {
color: red;
}
`;
export default class App extends Component {
render() {
return (
<div>
<XZLinput type="password" left="20px"></XZLinput>
</div>
);
}
}