hops-styled-components
Please see the main Hops Readme for general information and a Getting Started Guide.
This is a preset for Hops that can be used to set up a <ThemeProvider />
and enable server-side rendering support for styled-components in Hops.
Installation
This preset must be used together with the hops-react
preset.
Add this preset and its peer dependency styled-components
to your existing Hops React project:
npm install --save hops-styled-components styled-components
If you don't already have an existing Hops project read this section on how to set up your first Hops project.
Usage
After installing this preset you can use styled-components
in your application.
import { render } from 'hops-react';
import styled from 'styled-components';
const Headline = styled.h1`
color: rebeccapurple;
`;
export default render(<Headline>Hello World!</Headline>);
Check out this integration test as an example for how to use this preset.
Configuration
Preset Options
This preset has no preset configuration options.
Render Options
This preset has only a single runtime option which can be passed to the render()
options inside the styled
key (see example below).
Name | Type | Default | Required | Description |
---|---|---|---|---|
styled.theme |
Object |
{} |
no | A theme object for the styled-components <ThemeProvider />
|
theme
In order to use theming with styled-components
, this preset wraps your application in a <ThemeProvider />
.
Example:
const myTheme = {
primaryColor: 'black',
};
export default render(<MyApp />, { styled: { theme: myTheme } });