06.md

Styled-Components pass style from props

在傳統 CSS / SCSS 的世界裡常常會把 class 當成 props 傳入 child, 從 parent 動態的變化 child 的 class

來看一下簡單的範例

const Styled = () => {
  return (
    <div>
      <Text className={some-class} />
    </div>
  )
}

const Text = ({ className }) => {
  return (
    <div className={`primary-class ${className}`}>
      This is an apple
    </div>
  )
}

在程式裡常常看到這樣的方式 string cascade / cx 來讓 parent 能夠把 class name 當做 props 傳遞到 child, 進而改變 child class.

---

Styled-Component pass style from props

現代的問題需要用現代的手段來解決

const Styled = () => {
  return (
    <div>
      <Text containerStyle={TextStyle} />
    </div>
  )
}

const Text = ({ containerStyle }) => {
  return (
    <TextPanel containerStyle={containerStyle}>
      This is an apple
    </TextPanel>
  )
}

Text.propTypes = {
  containerStyle: PropTypes.object
}

export const TextStyle = css`
  color: green;
`;

export const TextPanel = styled.div`
  color: red;
  ${(props) => props.containerStyle}
`;

可以看到 TextStyle 是一個由 styled-component 產生出來的 css, 而 TextPanel 裡面則去把 containerStyle 展開即可

---

tags: React Styled-Components

---