tags: 2021鐵人賽 React

因為下一篇要讓導覽列在手機版網頁呈現漢堡選單的樣式，在參考其他工程師寫的網頁的時候，發現有一位是用styled-components這個套件來寫的，這篇就來了解styled-components的特色，以及學習怎麼使用它。

CSS in JS

就是可以把CSS寫在JS裡面的意思，這樣的寫法好處是寫在JS裡面的CSS設定，只會對這支JS產生的HTML元素有效果，不會影響到別支JS檔產生的元素。這跟之前的CSS module有類似的作用，不過styled-components還有許多CSS module沒有的特點，下面會再一一說明。
下面這個是CSS in JS的簡單範例，也可以到codepen連結玩玩：

const Container = styled.div`
  text-align: center;
`

const Button = styled.button`
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

function App() {
  return (
    <Container>
      <Button>Normal Button</Button>
    </Container>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Props

可以透過props將變數傳遞至CSS樣式內，官方範例如下，或是可以至codepen玩玩，看到button會出現兩種背景不同樣式，因為一個有加primary。這個功能我覺得還蠻好用的，可以根據載入JSX元件的資料動態改變CSS設定，例如股票的漲跌就會用到，數字大於0就用紅色，數字小於0就用綠色...之類的用法。不過要記得import { css }喔。

const Container = styled.div`
  text-align: center;
`

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${props =>
    props.primary &&
    css`
      background: palevioletred;
      color: white;
    `};
`

function App() {
  return (
    <Container>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </Container>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

{ css }

前一個範例有import { css }，這是CSS的helper，當有常用的css設定，就可以把它寫成一個helper，就可以重複使用了，因此可以將上一個範例程式碼改成這樣，props的部份就變得比較簡潔。

const Container = styled.div`
  text-align: center;
`

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;

  ${props =>
    props.primary && helper
`

const helper = 
    css`
      background: palevioletred;
      color: white;
    `

function App() {
  return (
    <Container>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </Container>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Extending Styles

這個功能是可以用已經寫好的styled components去製作新的components，樣式會承接之前寫好的部分，然後還可以加上新的樣式，可以到codepen玩玩。

const Container = styled.div`
  text-align: center;
`

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid palevioletred;
  color: palevioletred;
  margin: 0 1em;
  padding: 0.25em 1em;
`

const GreenButton = styled(Button)`
  color: green;
  border-color: green;
`;

function App() {
  return (
    <Container>
      <Button>Normal Button</Button>
      <GreenButton>Primary Button</GreenButton>
    </Container>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

Theming

這個功能非常強大，使用方式是透過ThemeProvider這個wrapper component，將主題樣式套用在所有在wrapper內的styled-components，而且不管子元件在多深的階層都能套用到。範例可至codepen玩玩。

const Container = styled.div`
  text-align: center;
`

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

const Link = styled.a`
  font-size: 1em;
  color: ${props => props.theme.deeper};
`

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

const theme = {
  main: "mediumseagreen",
  deeper: "palevioletred"
};

function App() {
  return (
    <Container>
      <Button>Normal</Button>
      <ThemeProvider theme={theme}>
        <Button>Themed</Button>
        <Button><Link>Deeper</Link></Button>
      </ThemeProvider>
    </Container>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
)

小結

styled-components是個非常強大的套件，可以使用的功能還蠻多的，今天寫的只是其中一小部份，不過這些暫時先足夠拿來製作漢堡選單，下一篇就會開始來製作導覽列的漢堡選單囉。