☰

styled-components でスタイルを共有する慣用的な方法は? 質問する

tag-icon • tag-icon javascript styled-components jss
styled-components でスタイルを共有する慣用的な方法は? 質問する

jss から styled-components にコードを移植しようとすると、jss コードは次のようになります。

//...
const styles = {
  myStyles: {
    color: 'green'
  }
}

const {classes} = jss.createStyleSheet(styles).attach()

export default function(props) {
  return (
     <div>
       <Widget1 className={classes.myStyles}/>
       <Widget2 className={classes.myStyles}/>
     </div>
  )
}

私の質問は、複数のコンポーネント間で同じスタイルを共有する慣用的な方法は何でしょうか?

ベストアンサー1

実際の CSS 文字列を共有するか、styled-componentsコンポーネントを共有することができます。

  • CSS 文字列を共有する:
import {css} from 'styled-components'
const sharedStyle = css`
  color: green
`

// then later

const ComponentOne = styled.div`
  ${sharedStyle}
  /* some non-shared styles */
`
const ComponentTwo = styled.div`
  ${sharedStyle}
  /* some non-shared styles */
`
  • 実際のシェアstyled-components:
const Shared = styled.div`
  color: green;
`

// ... then later

const ComponentOne = styled(Shared)`
  /* some non-shared styles */
`
const ComponentTwo = styled(Shared)`
  /* some non-shared styles */
`

更新: コメントの質問に基づいて、styled-components のcss関数に props を渡すことが、コンポーネント自体に props を渡すのと同じように機能することを示す例を作成しました。https://codesandbox.io/s/2488xq91qj?fontsize=14からの公式の推奨事項は、タグ関数にstyled-components渡す文字列を常にラップすることです。この例では、コンポーネントは、関数の呼び出しによって作成された変数に埋め込まれた渡されたプロパティを通じて背景色と前景色を受け取ります。styled-componentscssTestcssStringcss

おすすめ記事