styled-components 基本使用

在 react 中可以使用 styled-components 来编写 css yarn add styled-components 具体的使用方式：

特点：

props 穿透
attrs 的使用
传入 state 作为 props 属性
继承
主题

jsx

import styled from 'styled-components'

export const HomeWrapper = styled.div`
  font-size: 50px;
  color: red;
  .banner {
    background: orange;
  }
`

// styled 还可以设置继承
const MyPrimaryButton = styled(MyButton)`
  color: skyblue;
`

// 或者是设置主题 其中的 themeColor: 'yellow' 就可以通过  ${(props) => console.log(props)} 获取到
  <ThemeProvider theme={{ themeColor: 'yellow', fontSize: '30px' }}>
      <MyPrimaryButton>我是普通按钮</MyPrimaryButton>
  </ThemeProvider>


// props 穿透
const MyInput = styled.input.attrs({
  placeholder: 'nihao',
  bColor: 'red'
})`
  background-color: lightblue;
  border-color: ${(props) =>
    props.bColor}; // 使用 $ { } 的方式访问上面 attr中定义的 自定属性,
  color: ${(props) => props.color};
`
/*
  在使用 MyInput 组件时传递 <MyInput color={this.state.myColor} /> state 中的数据，
  state传递的数据，会结合到attrs中，也可以在这里使用  ${(props) =>
    props.color} 访问到
*/

styled-components 基本使用 ​

styled-components 基本使用