React Styled-component 筆記 P1

最基本的 Styled-component。
創造一個叫 Title 組件，會渲染 h1 標籤加上 style。

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

接著是很聰明的用法。先來一個基本的 Button。但如果我想要一個不一樣顏色的怎麼辦？可以在 styled 後面引入 component 的名稱。再加上自己想要的 style，就可以引入 component 的 style，再加上自己的客製化。

const ButtonA = styled.button`
  color: palevioletred;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;
const TomatoButton = styled(ButtonA)`
  color: tomato;
  border-color: tomato;
`;

又來一個猛的。不只可以無痛延續別的 component 的 style，甚至可以把 tag 直接改掉。例如說，component 本來是寫 h1 的 style，但我想換成 div，沒問題！直接在 as = "div" 就可以改了，還可以加上網址。
下面是官方範例。它是把 button 改成 a。

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>

先這樣，後面的還沒看懂。