How to modify a class (override some styles) #1638

fjpedrosa · 2023-03-01T22:42:54Z

fjpedrosa
Mar 1, 2023

Using React, imagine I hace a shared component that is a button:

const useButtonStyles = createUseStyles({
   button: {
      background: 'blue'
   }
})

const Button = () => {
const classes = useButtonStyles()
return (
   <button className={classes.button} onClick={() => alert('You clicked the button)}>Button</button>
)

Now, suppose that I would like to add a "styles" prop to the button, so that I can modify the "classes.button" class, not completely overriding it but composing. Something like this:

const useButtonStyles = createUseStyles({
   button: ({ styles }) => {
      background: 'blue',
      ...styles?.button
   }
})

const Button = ({ styles }) => {
  const classes = useButtonStyles({ styles })
  return (
     <button className={classes.button} onClick={() => alert('You clicked the button')}>Button</button>
  )
}

const App = () => {
  return (
    <Button styles={{button: { border: '1px solid red' }}}/>
  )
}

Is this correct? I am not sure and have the feeling that there is a specific way to achieve this. The problem I hace is that I end ap with a function un all classes I create and I want to add this flexible overriding. Thanks in advance.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

How to modify a class (override some styles) #1638

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

How to modify a class (override some styles) #1638

Uh oh!

Uh oh!

fjpedrosa Mar 1, 2023

Replies: 0 comments

fjpedrosa
Mar 1, 2023