styled-components 樣式

樣式繼承

可能我們希望某個(gè)經(jīng)常使用的組件,在特定場(chǎng)景下可以稍微更改其樣式.當(dāng)然我們可以通過(guò) props 傳遞插值的方式來(lái)實(shí)現(xiàn),但是對(duì)于某個(gè)只需要重載一次的樣式來(lái)說(shuō)這樣做的成本還是有點(diǎn)高.

創(chuàng)建一個(gè)繼承其它組件樣式的新組件,最簡(jiǎn)單的方式就是用構(gòu)造函數(shù)styled()包裹被繼承的組件.下面的示例就是通過(guò)繼承上一節(jié)創(chuàng)建的按鈕從而實(shí)現(xiàn)一些顏色相關(guān)樣式的擴(kuò)展:

// 上一節(jié)創(chuàng)建的沒(méi)有插值的 Button 組件
const Button = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 一個(gè)繼承 Button 的新組件, 重載了一部分樣式
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);

可以看到,新的TomatoButton仍然和Button類(lèi)似,我們只是添加了兩條規(guī)則.

In some cases you might want to change which tag or component a styled component renders.這在構(gòu)建導(dǎo)航欄時(shí)很常見(jiàn)，例如導(dǎo)航欄中同時(shí)存在鏈接和按鈕,但是它們的樣式應(yīng)該相同.

在這種情況下,我們也有替代辦法(escape hatch). 我們可以使用多態(tài) "as" polymorphic prop 動(dòng)態(tài)的在不改變樣式的情況下改變?cè)?

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;
`;

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

render(
  <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>
);

這也完美適用于自定義組件:

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;
`;

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

render(
  <div>
    <Button>Normal Button</Button>
    <Button as={ReversedButton}>Custom Button with Normal Button styles</Button>
  </div>
);

給任何組件添加樣式

styled方法適用于任何最終向 DOM 元素傳遞 className 屬性的組件,當(dāng)然也包括第三方組件.

注意在 react-native 中，請(qǐng)使用 style 而不是 className.

// 下面是給 react-router-dom  Link 組件添加樣式的示例
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);

const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;

render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

注意也可以傳遞標(biāo)簽給styled(), 比如: styled("div"). 實(shí)際上styled.tagname的方式就是 styled(tagname)`的別名.