Zenn
🌊

propではなく、css variables使ってみてどうですか？

2024/03/28に公開
CSS
JavaScript
React
styled-components
tech

内容

以下のようなcssの渡し方みんなやりがち

Component.tsx
import React from 'react'
export const ParentComponent = () => {
  const btnStyles = {
    color: acquagreen,
    border: 1px solid acquagreen,
    backgroundColor: white,
    fontSize: 12px
  }
  return (
    <div>
      <Button styles={btnStyles} text={"Hello Word"}/>
    </div>
  )
}
export const Button = ({ styles, text }) =>
       <Button styles={styles}>{text}</Button>

css variables使ってみた場合、

ParentComponent.tsx
import React from ‘react’
import Button from ‘./Button’
import styled from ‘styled-components’

const Root = styled.div`
  --primary-color: aquagreen;
  --bg-color: #eee;
  --btn-font-size: 18px;
  /* .... */
`
export const Parent = () =>
const onClick = ()=> ...
  <Root>
    <Button onClick={onClick}>Buy now</Button>
  </Root>
Button.tsx
const StyledButton = styled.button`
  background-color: var(--bg-color);
  font-size: var(--btn-font-size);
  color: var(--primary-color);
  /* その他 */
`;

const Button = ({ children, onClick }) => (
  <StyledButton onClick={onClick}>
    {children}
  </StyledButton>
);

export default Button;

良いなと思った点

  • スタイリングをjsxの定義から分離できる。
    • 行数減る
  • cssの値処理はブラウザに働かせる
    • javascriptの処理減る
    • パーフォマンス上がる

参考

css variablesとアプリケーションパーフォマンスに対しての影響に関して書いてますので、合わせて確認してみてください👍
https://epicreact.dev/css-variables/

Discussion