StylingStyled Components

Styled components (often, no pun intended, stylized as styled-components) is a library for defining CSS styles in JavaScript. More specifically, it offers a novel way to define React components with CSS styles attached, using a developer-friendly syntax. This is the preferred method for authoring CSS in Pup.

There are two key methods for using styled-components:

  1. Attaching styles to a built-in HTML element which returns a React component containing that elements and your styles.
  2. Attaching styles to an existing React component which returns a new React component containing that component and your styles.

On the right, examples of both are provided. For more details on using styled-components, it's recommended that you read their docs here.

Using a Built-In HTML Element
import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background: #4285f4;

const ExampleComponent = () => (
    <p>The background of the component wrapping this text is Clever Beagle blue!</p>
Using an Existing React Component
import React from 'react';
import { ControlLabel } from 'react-bootstrap';
import styled from 'styled-components';

const StyledControlLabel = styled(ControlLabel)`
  color: #4285f4;

const ExampleComponent = () => (
    <StyledControlLabel>I'm an input label, now styled with Clever Beagle blue</StyledControlLabel>
    <input type="text" name="example" className="form-control" />

Organizational Conventions

In Pup, you'll notice that styles are not defined inline in component files like in the example above. Instead, we recommend placing your styles in a file called styles.js and placing that alongside your component's index.js file in its respective folder under the /ui directory (components, layouts, or pages).

Styles should be exported as a single object using a default JavaScript export and imported into the component where they'll be used with import Styles from './styles';.