идиоматический способ обмена стилями в стиле-компонентах?

пытаясь перенести некоторый код из 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>
  )
}

мой вопрос заключается в том, что было бы идиоматическим способом выполнения этого совместного использования одних и тех же стилей в нескольких компонентах?

Ответ 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 работает так же, как и передача реквизитов в сами компоненты: https://codesandbox.io/s/2488xq91qj?fontsize=14. Официальная рекомендация styled-components - всегда переносить строки, которые вы передадите в styled-components в функции тега css. В этом примере компонент Test получает цвета фона и переднего плана через переданные реквизиты, встроенные в переменную cssString, созданную путем вызова функции css.

Ответ 2

В дополнение к опубликованному ответу вы также можете создать функцию, которая принимает 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 ... */
'