styled-components 是一个常用的 css in js 类库,通过 js赋能解决了原生 css所不具备的能力

安装

yarn add styled-components //js源码
yarn add --dev @types/styled-components//TS声明文件

styled-component使用

1、基本用法 将样式附着在component上，变成样式化的组件。：

export default function App() {
 const Wrapper = styled.section`
 padding: 4em;
 background: papayawhip;
`;
const Title= styled.h1`
 font-size: 1.5em;
 text-align: center;
 color: palevioletred;
`;

return(
 <Wrapper>
   <Title>
     Hello World!
   </Title>
 </Wrapper>
);
}

2. props使用 根据props设置不同的样式

import styled from 'styled-components'
export default function App() {

 const Button = styled.button`
  background:${props => props.primary?'red':'white'};
 font-size: 1em;
 margin: 1em;
 padding: 0.25em 1em;
 border: 2px solid palevioletred;
 border-radius: 3px;
`;

return(
 <div>
 <Button>demo</Button>
 <Button primary>demo1</Button>
</div>
);
}

3. 继承样式 子元素会继承父元素的样式，比如已经配置好一个Button组件，只是想换下颜色，其他样式都不变，就可以用继承样式。

import styled from 'styled-components'
export default function App() {
  const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;


const ExtendButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

return(
  <div>
  <Button>Normal Button</Button>
  <ExtendButton>Extend Button</ExtendButton>
</div>
);
}

不改变样式改变元素

import styled from 'styled-components'
export default function App() {
  const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

return(
  <div>
  <Button>Normal Button</Button>
  <Button as="a" href="/">Link with Button styles</Button>
  <TomatoButton as="a" href="/">Link with Tomato Button styles</TomatoButton>
</div>
);
}

自定义组件

import styled from 'styled-components'
export default function App() {
  const Button = styled.button`
  display: inline-block;
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
  display: block;
`;

const ReversedButton = props =>
 <Button {...props} children={props.children.split('').reverse()} />

return(
  <div>
  <Button>Normal Button</Button>
  <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>

</div>
);
}

4. 支持React Native React Native不能使用div、h1以及keyframe,这也是选择styled-componented的原因之一

import React from 'react'
import styled from 'styled-components/native'

const StyledView = styled.View`
  background-color: papayawhip;
`

const StyledText = styled.Text`
  color: palevioletred;
`

class MyReactNativeComponent extends React.Component {
  render() {
    return (
      <StyledView>
        <StyledText>Hello World!</StyledText>
      </StyledView>
    )
  }
}

5. 主题模式

样式化组件通过导出一个完整的主题，支持ThemeProvider包装器组件,该组件通过上下文API为其下方的React组件提供了一个主题。

export default function App() {
  const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

Button.defaultProps = {
  theme: {
    main: "palevioletred"
  }
}

const theme = {
  main: "mediumseagreen"
};

return (
<div>
    <Button>Normal</Button>

    <ThemeProvider theme={theme}>
      <Button>Themed</Button>
    </ThemeProvider>
  </div>

)
}