Advanced React Patterns With Hooks/

...

/

Custom Styling Options

Custom Styling Options

We'll now learn how to override default styles!

We'll cover the following...

Styling

So far, we’ve handled styling with the className prop. What about the option to override default styles by passing a style prop? As of right now, we can’t do that

Let’s fix that!

Instead of explicitly destructuring the style prop, we can pass any other prop passed by the user to the button component.

// Body.js
import { useContext } from 'react'
import { ExpandableContext } from './Expandable'

const Body = ({ children }) => {
  const { expanded } = useContext(ExpandableContext)
  return expanded ? children : null
}
export default Body

Note the use of the ...