react 之样式的书写_react样式的写法

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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

普通的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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 引入就行了

import "./navbar.scss"
1

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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

简单写法抽离

son.jsx

import React from 'react';
// 方式1
// import styledComponents from 'styled-components';
// const SonWrap = styledComponents.div`
//   color: #eee;
//   background: pink;
// `
// 方式2
import SonWrap from './Son_css';
export default function Son(props) {
    return (
        <SonWrap>
          son
        </SonWrap>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

son_css.js

import styledComponents from 'styled-components';
 const SonWrap = styledComponents.div`
  color: #eee;
  background: pink;
`
export default SonWrap
1
2
3
4
5
6

props、attrs属性

定义一个input组件

import React, { Component } from "react";

import styled from 'styled-components';
// 定义一个组件 为当前组件添加css样式等 当前组件为 input组件
const XZLinput = styled.input`
  color: orange;
  &:focus{
    color: red;
  }
`

export default class App extends Component {
  render() {
    return (
      <div>
        <XZLinput  type="text" placeholder="请输入"></XZLinput>
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

props可传递样式

• 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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

attr添加内在属性

import React, { Component } from "react";

import styled from "styled-components";

// 定义一个组件 为当前组件添加css样式等 当前组件为 input组件 
// attrs为当前input组件添加默认属性等！
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>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26