react四种组件中DOM样式设置方式详解

import React, { Component } from 'react'
1. 外部引入定义的样式
import styles from './style.css'

class ClassStyle extends Component {
  render() {
    // js逻辑
    let className = cx({
      font: false
    })
    return (
      <>
        <div className={className}>hello</div>
        <p className='setstyle'>样式</p>
        <DivContainer>
          world
        </DivContainer>
      <>
    )
  }
}

export default ClassStyle

import style from './style.css'
<div className={style.class1 style.class2}</div>

import classnames from 'classnames'
<div className=classnames({
    'class1': true,
    'class2': true
    )>
</div>

import styled from 'styled-components'
const Title = styled.div`
    color:red;
    font-size:16px;
    h3{
        color:blue;
        font-size:20px;
    }
`
export {
    Title
}

import React, { Component } from 'react'
import { Title } from './Styles'
class App extends Component {
render() {
    return (
        <div>
            <Title>
            我只是一个标题
            <h3>你好世界</h3>
            </Title>
        </div >
        );
    }
}
export default App

import styled from 'styled-components'
const Button = styled.button`
    font-size: 20px;
    border: 1px solid red;
    border-radius: 3px;
`;

// 一个继承 Button 的新组件, 重载了一部分样式
const Button2 = styled(Button)`
    color: blue;
    border-color: yellow;
`;

export {
    Button,
    Button2
}

import React, { Component } from 'react'
import {
Button,
Button2
} from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Button>我是一个按钮1</Button>
        <Button2>我是一个按钮2</Button2>
    </div >
    );
}
}
export default App

import styled from 'styled-components'
const Input = styled.input`
    color: ${props => props.inputColor || "blue"};
    border-radius: 3px;
`;
export {
    Input
}

import React, { Component } from 'react'
import { Input } from './Styles'
class App extends Component {
render() {
    return (
    <div>
        <Input defaultValue="你好" inputColor="red"></Input>
    </div >
    );
}
}
export default App