Create a global style component.
const Global = styled.global``;
const Global = styled.global<Props>``;
Create a styled function/namespace, with an optional theme.
const styled = createStyled();
const styled = createStyled(useTheme);
Once created, use the API as follows.
const Styled = styled('div')``;
const Styled = styled('div')<ExtraProps>``;
const Global = styled.global``;
const Global = styled.global<ExtraProps>``;
Create a theme hook and provider component.
const [useTheme, ThemeProvider] = createTheme({ color: 'red' });
Use the theme in a styled component.
const Styled = styled('div', () => ({ theme: useTheme() })`
color: ${(props) => props.theme.color};
`;
Use the theme provider to override theme values. Using the provider isn't necessary if you just want to use the default theme values.
<ThemeProvider value={{ color: 'blue' }}>
<StyledDiv />
</ThemeProvider>
Create a style helper (AKA: mixin) function.
const helperFunction = css``;
const helperFunction = css<Props>``;
Get a stable ID string which is safe to use as a CSS identifier.
const id = getId('namespace');
Note: When process.env.NODE_ENV is "test" (eg. during Jest testing),
this function returns a stable value for the given display name. This value
is NOT unique per invocation like it would be at runtime.
Get a string containing all the <style> elements which have been
generated during SSR or testing.
const appHtml = renderToString(<App />);
const stylesHtml = renderStylesToString();
Note: This will reset and clear all previously mounted styles.
Generated using TypeDoc
Create a styled component.