React引入css的几种方式及应用小结

import "./parent.css"

import styles from "./parent1.module.css"
.title{
    color: red;
}
<h2 className={styles.title} style={{ background:'pink' }}>我是父组件</h2>

import styleComponents from "styled-components"
// 自定义样式的组件 注意定义的首字母大写，不然不生效
const StyleP = styleComponents.p`
    color: green;
    font-size: 30px;
    font-weight: bolder;
`
const StyleTitle = styleComponents.h1`
    color: red
`
<StyleTitle>第三方库引入css demo</StyleTitle>
<StyleP>第三方库引入css demo</StyleP>

const Wrapper = styled.div`
    width: ${props => props.wrapperWidth};
    height: ${({wrapperHeight}) =>parseInt(wrapperHeight)/2 + 'px'};
    background: red;
`
<Wrapper wrapperWidth="200px" wrapperHeight="100px"></Wrapper>

const ParentItem = styled.div`
    display: block;
    color: yellow;
    text-align: center;
    line-height: 1.5;
    font-size: 20px;
`
const Item = styled(ParentItem)`
    color: blue;
    font-size: 16px;
    &:nth-child(2n-1){
        background: #00ffe4;
    }
`
<ParentItem style={{color: 'red'}}>姜虎东</ParentItem>
<Item>都到曦</Item>
<Item style={{color: '#fff'}}>郑九元</Item>

const UserInput = styled.input`
    display: block;
    width: 500px;
`
// 通过attr定义属性
const PasswordInput = styled.input.attrs(({ type, placeholder }) => ({ 
    type: type ? type : 'text',
    placeholder: placeholder || '请输入'
}))`
    display: block;
`
用户名：<UserInput value={this.state.username} type="text" placeholder="请输入用户名"></UserInput>
用户：<PasswordInput value={this.state.username}></PasswordInput>
{/* 在组件标签上定义属性 */}
密码：<PasswordInput value={this.state.password} type="password" placeholder="请输入密码"></PasswordInput>