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 } });