This video is available to students only

Now that we have a flexible API to control our Button component, let's add the relevant styling from our demo application. We will be using styled-components as our CSS-in-JS solution and including custom props for controlling each style.

Prop definitions#

button styling example

Using the demo application we can identify four unique style combinations. These styles can be represented with the following props:

With these values we are able to create a custom prop interface for our Button component. Note that disabled is a native property already provided by HTMLButtonElement so we don't have to explicitly define it.

styled-components#

Similar to react and react-dom, styled-components requires us to mark it as a peer dependency. We will also be including polished; a library that allows us to perform style calculations at runtime.

Global variables#

Even though we are writing our styles with CSS-in-JS, many of the best practices from traditional CSS and pre-processors still apply. Our demo application provides color constants from the _variables.scss file for use throughout its components. Let's migrate those SASS variables to TypeScript for use in our components.

Create a new file at src/utils/styles.ts.

Initial styling#

Create a new styles.ts file alongside Button.tsx. This file will include all of the styling logic for the component.

If we look at the .company-button styles from the demo application we can identify some initial styles that are provided regardless of the different style variants. Let's create a new styled component that includes these styles.

Please select a discussion on the left.