Norman's Note 諾曼筆記

Norman's Note 諾曼筆記

styled-components 筆記

  • 增加空白
&::before,
&::after {
  content: ' ';
}
  • margin: auto 推到底的意思

  • 從某個 class name 起始

const Input = styled.input.attrs({
  className: 'custom-class-name',
})`

transient props

  • Note the dollar sign ($) prefix on the prop; this marks it as transient and styled-components knows not to add it to the rendered DOM element or pass it further down the component hierarchy.
const Comp = styled.div`
  color: ${props => props.$fg || 'black'};
`;

render(<Comp $fg="red">I'm red!</Comp>);