In this article we dive deeper into the unified component styles and it's possibilities.
In our Unified component styles article you can learn how to use CSS to adjust styling in your components, this allows you to easily add any CSS property to default components, customizing their appearance to your specifications.
We have collected some of the most often used and popular CSS properties you can apply to your components, give them a try:
color: Used to set the text color.font-size: Used to set the size of the font.background-color: Used to set the background color.margin: Used to create space around an element.padding: Used to create space within an element.border: Used to create a border around an element.display: Used to specify the display behaviour of an element.
Using CSS for specific components
Once you start working with CSS properties, it is important to select an existing style that matches your branding, or create a new one for the targeted component (group). Add the new style and save it as you are making changes.
In most of the components, the CSS property within the class will target the component in its entirety.
However, some components exist out of multiple parts. The Card component, for example, is placed on the canvas with a Card header, Card media, Card content, and Card action segment.
When targeting the card component unified styling, you will not be able to change the font in the title segment, but when changing the background-color will change the overall background color. It is important to note that child components will always be able to overlap their style.
In this example the background color of the card is green, but the Card header background color is grey. Since this is a child component it overlaps the Card's background color.
Multi-part components
A multi-part component exists of multiple segments; this sometimes means that when using custom CSS, it can target various parts of the component.
While we work on refining our unified styling feature, you may look into this list to see which segments exist within a component, allowing you to see wether a CSS properties might target multiple features, or none as expected.
| Component | Component segments |
| Card component | container, text field, card header, card media, card actions, card content |
| Data table | Table, TableBody, TableContainer, TableHead, TableRow, TableCell, TablePagination, Paper, Toolbar, TextField |
| Navigation bar | AppBar, Toolbar, IconButton, Typography, Menu, MenuItem |
| Tabs | label, icon, disabled, disableRipple, iconAlignment, dataComponentAttribute |
| Breadcrumbs | Container, useText, Icon |
| Expansion panel | ExpansionPanel, ExpansionPanelSummary, ExpansionPanelDetails, Typography, |
| List Item | ListItem, ListItemText, ListItemIcon, ListItemAvatar, Avatar |
| Stepper | Stepper, Step, StepLabel, StepButton, StepContent, MobileStepper, Button |
If a component's styling does not respond the way you expect it to, please report it to our support department. When the regular component set does not suffice, you may also look into creating your own component set. You can do this via our Enablement toolkit content.
Components without unified styling
There are however also a few components that don't allow unified component styling to be applied, that currently apply to these components:
- All button components (have their own styling options)
- Form
- Hidden input
- Alert
- Detail view child
- Dialog
- Drawerbar
- Menu (menu items can be styled)
- Snackbar
To see which components allow custom styling, see our component set on our github.
A component that calls upon the 'includeStyling' class, will allow the unified component styles CSS functionality to apply to the component, this also applies to custom components.
The include styling tag:className={includeStyling()}
Note: when working with unified styling, this feature is still being looked into by our product team, so some selectors might not respond the way you expect them to.
Certain CSS properties can be changed by using the style options within the component, and the remainder, when available, can be set in the unified style section.