学习React[七]

React的样式

目录

1.内联样式

2.styled_components

1.内联样式

import React, { PureComponent } from 'react'

export default class App extends PureComponent {

  constructor(props) {
​    super(props);

​    this.state = {
​      color: "orange"
​    }
  }

  /*  内联样式的优点：
​    \1. 内联样式, 样式之间不会有冲突

​    \2. 可以动态获取当前state中的状态
  */

  /*  内联样式的缺点：

​    1. 写法上都需要使用驼峰命标识

​    2. 某些样式没有提示

​    3. 大量的样式，代码混乱

​    4. 某些样式无法编写(比如伪类/伪元素) 
  */
  render() {
​    // 把 CSS 属性变成一个对象再传给元素，CSS属性名要是驼峰命名法
​    const pStyle = {
​      color: this.state.color,
​      textDecoration: 'underline'
​    }

​    return (
      <div>
​        <h2 style={{ fontSize: '25px', color: 'pink' }}>我是一个标题</h2>
        <p style={pStyle}>我是一个段落</p>
​      </div>
​    )
  }
}

2.styled_components

// index.js
import React, { Fragment, PureComponent } from 'react'

import {
  HomeWrapped,
  TitleWrapped
} from './style'

export default class Home extends PureComponent {
  render() {
​    return (
​      <Fragment>

​        <HomeWrapped>

​          <TitleWrapped className="title">我是Home的标题</TitleWrapped>

           <div className="banner">
​            <span>轮播图1</span>
​            <span>轮播图2</span>
​            <span className='active'>轮播图3</span>
​          </div>

​        </HomeWrapped>
​      </Fragment>
​    )
  }
}

使用styled-components

// 安装完styled-components，然后导入styled-components
import styled from 'styled-components';
 // styled.div就是你要给的标签，然后使用`` 写
export const HomeWrapped = styled.div`
  /* 因为 h2标签的font-size是 1.5em 所以比较大 */

  font-size: 18px;

  color: pink;

  .banner {
​    background-color: skyblue;
  }

  span {
​    color: #fff;

​    &.active {
​      color: red;

​    }

​    &:hover {
​      color: orange;
​    }

​    &::after {
​      content: "czm"
​    }
  }
`

export const TitleWrapped = styled.h2`
  text-decoration: underline;

`

styled-components 传递参数

import React, { Fragment, PureComponent } from 'react'

import styled from 'styled-components';

// .attrs({}) 可以定义变量，然后通过${props => props.bColor}拿到
const HYInput = styled.input.attrs({

  placeholder: 'czm',

  bColor: 'red',

})

`
  outline: none;

  background-color: lightblue;

  border-color: ${props => props.bColor};

  color: ${props => props.co}

`

/* 特点：

1. props穿透 

2.attrs使用

3.传入state作为props属性（动态） 

*/

export default class Profile extends PureComponent {

  constructor(props) {
​    super(props);

​    this.state = {
​      color: 'red'
​    }
  }

  render() {

​    return (

​      <Fragment>

​        <HYInput type='text' co={this.state.color}/> <br/>

​        <input type='password'/>

​        <h2 className='title'>我是profile的标题</h2>

​        <ul className='setting'>

​          <li>设置列表1</li>

​          <li>设置列表2</li>

​          <li>设置列表3</li>

​        </ul>

​      </Fragment>
​    )
  }
}

styled-components 属性的继承

import React, {PureComponent } from 'react'
import styled, {ThemeProvider} from 'styled-components'
import Home from '../Home/home'
import Profile from '../Profile/profile'

const HYButton = styled.button`

  padding: 10px 20px;

  border-color: red;

  color: pink;

  cursor: pointer;

`


// 把 HYButton中属性继承到 HYButtonUp里面
const HYButtonUp = styled(HYButton)`

  color: #fff;

  background-color: skyblue;

`

export default class App extends PureComponent {
  render() {
​    return (

​        <Home/>

​        <hr/>

​        <Profile/>

​        <HYButton>普通按钮</HYButton> <br/>

​        <HYButtonUp>升级按钮</HYButtonUp>

​    )
  }
}