Styling with CSS-in-JS
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.
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.
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
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.