Easy component styles overriding with React & Soperio

Today, I want to talk to you about one of many advantages of Soperio components: style overriding.

We all have the case when we're using a component, and we need to apply a bit of styles customization on it.

Now, this could be a custom component or a component from a UI framework.

There are multiple ways of doing this, be it using additional CSS, utility classes, the style property, the sx property (for framework providing this property), or even creating a new component based on the initial one.

But let's see how to do this simply with Soperio.

How to override a component styles with Soperio

Let's say we are using the component below:

import { SoperioComponent, ParentComponent } from "@soperio/react"

interface MyBadgeProps extends SoperioComponent, ParentComponent
{
   // ...
}

function MyBadge({ children, ...props }: MyComponentProps)
{
   return (
      <div 
         p="3"
         rounded
         bgColor="lightblue"
         textColor="white" 
         {...props}
       >
         {children}
       </div>
   )
}

Ok, so now we have a component with a padding of 3 units, rounded corners, a light blue background and white text. Let's say this component is badge component.

Now, let's say we want to use this component into our UI.

We just want to display a list of badges next to an icon. But depending on the value of some variable, we want to change its background color.

const badges = [
  {
     name: "Cats",
     value: 12
  },
  {
     name: "Dogs",
     value: 53
  },
  {
     name: "Horses",
     value: 87
  },
]

function MyRandomComponent()
{
   return (
      <div dflex flexRow spaceX="3">
         <MyIcon ... />

         {badges.map(item => 
             <MyBadgeComponent 
                bgColor={item.value > 50 ? "green" : "red"}
             >
                {item.name}
             </MyBadgeComponent>
          )}
       </div>
   )
}

Now, as you can see, I just overriden the property bgColor or the badge component, to make it dynamic. Very simple, isn't it?

But the cool thing is: we're not only limited to the properties defined in MyBadgeComponent. We can also add any of the properties of Soperio.

Since the properties of MyBadgeComponent extends the SoperioComponent interface, we can use all of Soperio's properties.

Let's take back our example, but this time we want to change the font weight and text size as well.

const badges = [
  {
     name: "Cats",
     value: 12
  },
  {
     name: "Dogs",
     value: 53
  },
  {
     name: "Horses",
     value: 87
  },
]

function MyRandomComponent()
{


   return (
      <div dflex flexRow spaceX="3">
         <MyIcon ... />

         {badges.map(item => 
             <MyBadgeComponent 
                bgColor={item.value > 50 ? "green" : "red"}
                fontWeight="800"
                textSize="xl"
             >
                {item.name}
             </MyBadgeComponent>
          )}
       </div>
   )
}

Easy, no? You can do this with all the components!

How to do the same thing without Soperio.

If you're not using Soperio, you can achieve the same thing, more or less easily.

You could decide to add some CSS and attribute the associated class name to the component.

Or you could use the good old style property. Or a mix of the two.

But you would have to concatenate the classnames, or the style prop object.

If you're using a UI framework like MUI or Chakra UI, you might want to use the sx prop. But here again, you would need to concatenate it.

If you're using styled components, you would need to create a new component based on the first, and add the new styles to it.

Other advantages of this method

Overriding styles with Soperio is simple and easy. But you also take advantage of the values of your theme, the responsive design properties, hover and focus states, the dark mode theme and everything that also comes with Soperio.

Things that you couldn't do using the style property or additional CSS for example (unless you write a lot of code).

It might be possible with the sx property but again, it would not be so easy. Same goes for styles components.

Conclusion

Overriding components' styles with Soperio is simple and easy. It doesn't add much code, is readable and you can enjoy of all Soperio's features.

Give it a try!

Comments

[EllaWaylen]

Good niformation share with us! i like this post! get lost love back specialist