Styling React Components

Squirro uses CSS in JavaSript together with an Emotion library to style React custom widgets.

Benefits

This approach has the following benefits:

• Styling is always tied to specific components. Accordingly, this prevents accidentally changing the stying of other elements with matching class names. In these situations Emotion generates the class names, leaving you to create newly-styled components without thinking about unique class names and scope.

• Styles can be dynamic and you can use variables and state values from JavaScript. You don’t need to add new classes when some state or variable changes; you simply pass that variable to the styled component.

• The automatic vendor prefixes means that there’s no need to define browser-based prefixes manually. This is done by Emotion.

Styled Variable

You can style components using the styled variable available in the global context. For more information, see Emotion’s documentation on Styled Components.

React Context Provider

Squirro also uses React context provider to pass theme objects to emotion-styled components, which is available as a prop in styled().

It contains all Squirro colors, fonts, spacings, and so on.

It’s recommended that you use theme values as much as possible to match Squirro design and styling.

Example Items Card

See an example Items Card component with changed padding below:

In this example, the original card has padding-right. This can be overridden without using !important or higher scope. You can simply use the new CustomCard as a component.

To learn more about Emotion and the Material UI library, see Styled Components