styled-components 樣式對(duì)象

樣式對(duì)象

styled-components 支持將 CSS 寫成 JavaScript 對(duì)象.對(duì)于已存在的樣式對(duì)象,可以很輕松的將其遷移到 styled-components.

// Static object
const Box = styled.div({
  background: 'palevioletred',
  height: '50px',
  width: '50px'
});

// Adapting based on props
const PropsBox = styled.div(props => ({
  background: props.background,
  height: '50px',
  width: '50px'
}));

render(
  <div>
    <Box />
    <PropsBox background="blue" />
  </div>
);