Proposal: Exported styled children components

[Idered]

It's hard to prepare component for every scenario. For cases not handled by props we should at least give user easy way to customize style of component. One way to do that is to export all styled child components which later could be used in user app:

import * as S from './styles'
export const TextInputElements = {
  Container: S.InputContainer,
  Input: S.Input
}

Which can be used in user application like this:

import {createGlobalStyle} from 'styled-components/macro'
import {TextInputElements} from '@smashing/text-input'

const CustomizedTextInput = createGlobalStyle`
  ${TextInputElements.Container} {
    padding: 8px 12px;
  }
`

It's impossible to style basing on a props passed to styled component

const App = () => (
  <div>
    <Pages/>
    <CustomizedTextInput />
  </div>
)

All Smashing components should implement this pattern.

Any one has a better name for export TextInputElements which will hold all styled children components?

[hzub]

IMO ComponentNameElements is a decent name, we could keep it this way