Add hooks for custom CSS overrides
As agreed at the PubSweetMeet (I think! someone confirm?), requirements for all components are:
- Every exported component should render a styled component and every child element of that component should be a styled-component
- Every styled component (incl. children) should have a hook for custom CSS
- Overriding subcomponents of a single instance (e.g. an input's label) will be done by passing in CSS with a selector for the subcomponent (rather than wrapping with a new ThemeProvider).
- The hook looks like this, though we should consider ways to refactor similar to the
th
helper:
${props => props.theme.css.<package-name>.<component-name>.<subcomponent-name>}
-
<package-name>
is the name from package.json stripped of its prefix (@pubsweet or pubsweet-component-*) -
<component-name>
is the exported component -
<subcomponent-name>
is the component having the hook applied to it
Outermost components will be referenced like subcomponents, for example: props.theme.css.ui.Form.Root
, not props.theme.css.ui.Form