web-dev-qa-db-ja.com

スタイル付きコンポーネントでスタイルを共有する慣用的な方法？

jssからスタイル付きコンポーネントにコードを移植しようとすると、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>
  )
}

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

javascriptstyled-componentsjss
21
tony_k

実際の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 */
`

更新：コメントの質問に基づいて、プロップをスタイル付きコンポーネントのcss関数に渡すことは、プロップをコンポーネント自体に渡すのと同じ方法で動作することを示す例を作成しました。 https：// codesandbox .io/s/2488xq91qj？fontsize = 14 。 styled-componentsからの公式の推奨事項は、cssタグ関数でstyled-componentsに渡す文字列を常にラップすることです。この例では、Testコンポーネントは、cssString関数を呼び出して作成されたcss変数に埋め込まれた小道具を通して背景色と前景色を受け取ります。

45
Huy Nguyen

投稿された回答に加えて、props/themeを受け入れ、css``を返す関数を作成することもできます。

styled-componentsは、提供された値のタイプをチェックします。例：${shared}そしてそのfunctionである場合、関連するprops/themeで呼び出します。 。

import styled, {css} from 'styled-components';

const shared = ({theme, myProp}) => css`
  color: theme.color
`

/* ------------   */

const Component1 = styled.div`
  ${shared};
  /* more styles ... */
`
const Component2 = styled.div`
  ${shared};
  /* more styles ... */
`
6
Sagiv b.g