Styling React Components
Styling React Components#
Squirro uses CSS in JavaSript together with an Emotion library to style React custom widgets.
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.
The automatic vendor prefixes means that there’s no need to define browser-based prefixes manually. This is done by Emotion.
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
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