In the React world, everyone has gotten used to styling their components by passing a className prop to them, referencing the CSS classes defined in some stylesheet. As you know, CSS classes encapsulate the styles needed for pages and page components, centralize them for easier maintenance and use, and are meant to ensure a consistent visual experience throughout a website. That’s great, but now with React, we're more and more thinking in smaller independent and reusable components, distinct from the rest – so why should their styles and classes contribute to bloating a global stylesheet?

The styled-components approach doesn’t suggest to get rid of CSS classes altogether. But with self-contained React components, they’re just an intermediary layer we can do without.

In this guide, we are going to show you how to benefit the most from using styled components in a Scrivito-based app.

First, in your project’s root directory, run the following to install the styled-components module:

That’s all – now, don’t forget to import styled from "styled-components" in your JS files.

Styled-components lets you attach styles to components directly. This way, components encapsulate their styles, obviating the need for CSS classes:

The styled method lets you attach styles to HTML elements (styled.button) or to components (styled(Button)) using a template string.

As you can see, we’ve additionally derived a slightly different version, a DangerButton, from the Button component by overriding two styles. As a more dynamic approach, instead of providing a dedicated DangerButton component, we could have used a prop for switching the Button styles:

Having access to a component’s props inside of style definitions makes this approach so tempting, especially with respect to theming (take a look at the ThemeProvider wrapper component, for example).

Scrivito includes several helper components for rendering CMS content like widgets, HTML markup, images, and a couple more. If Scrivito’s UI is active, these built-in components make content editable in “Edit” mode. Scrivito.ContentTag, for example, renders an attribute value of a CMS object or widget:

This technique lets us pass any number of further props, in this case just borderColor, to our styled component. And, if we wanted to, we could also override the styles passed in via className. For example, to change the font color set by the value and key classes, we’d replace it by adding color: green !important; to the BorderedFact component’s styles.

Note that we could also have made the color value configurable by editors. See Adding an Option to a Widget for details.

If you already have a React app, e.g. one based on create-react-app, and are making heavy use of styled components, you might want to have them render Scrivito-based content.

Let’s once again take a look at the Button component example above and figure out how we could pass the button text from within a widget component’s render method to it.

The content to be passed to a styled component can simply be retrieved using the widget.get method, or, with content that should be editable in place, using any of Scrivito’s helper components such as Scrivito.ContentTag. This analogously applies to page content.