diff --git a/docs/dls/component-design-guidelines.md b/docs/dls/component-design-guidelines.md index 877c224446..65eef4c057 100644 --- a/docs/dls/component-design-guidelines.md +++ b/docs/dls/component-design-guidelines.md @@ -20,7 +20,7 @@ to use Backstage's components (check the [Storybook][1] for a list and demo) first, and otherwise fall back to Material-UI components (check the [MUI docs][2]). If none of these fit your layout needs, then you can build your own components. -However, using HTML+CSS directly is not recommended, it's better to use MUI +However, using HTML+CSS directly is not recommended; it's better to use MUI layout components to make your layout theme aware, meaning if someone changes the theme, your layout would react to those changes without requiring updates to your code. @@ -50,9 +50,10 @@ secondary color instead), then the easiest way to access the color palette is to [Override the Component Styles][11] as suggested by Backstage. It's not a very common use case to override a theme color in a MUI component -but let's say you have a Paper component that highlights its content with a -different color for a side menu or something (usually you use the elevation, -but maybe the designer wanted a colorful app). You can use the theme like this: +but let's say you have a custom Sidebar component with a Paper component that +highlights its content with a different color for a side menu or something +(usually you use the elevation, but maybe the designer wanted a colorful app). +You can use the theme like this: ```tsx import { makeStyles, Paper } from '@material-ui/core';