Custom Styling Options
Explore how to enable custom styling in compound React components by passing style and className props. Understand how to override default styles on child components like Header, Body, and Icon for better flexibility and reusability.
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 BodyNote the use of the ...