Search⌘ K
AI Features
Home
Courses
Advanced React Patterns With Hooks

Manageable Styling for Reusable Components

Explore methods to make reusable React components easily styled by exposing className and style props. Understand how to combine default and user-defined classes, handle false values, and improve accessibility by using semantic elements like buttons instead of divs.

We'll cover the following...

Love it or hate it, styling (or CSS) is integral to how the web works.

While there’s a number of ways to style a React component - and I’m sure you have a favorite - when you build reusable components, it’s always a good idea to expose a frictionless API for overriding default styles.

Usually, I recommend having your components be styled via both style and className props.

For example:

Javascript (babel-node)
// this should work.
<MyComponent style={{name: "value"}} />
// and this.
<MyComponent className="my-class-name-with-dope-styles" />

Now, our goal isn’t just styling the component, but to make it as reusable as possible. This means letting the consumer style the component whichever way they want, whether that be using inline styles via the style prop, or by passing some className prop.

Styling the Header Component

Let’s begin with the Header child component; have a look at Header.js. ...