How to use a different style while reusing a component ?

In the CSS of the reusable component, create as many styles you want using '&'.

Note: Assuming that the className is component.

.component{
    // write the common styles here
}

.component {
    &-style1 {
        // write style 1 
    }
    &-style2 {
        // write style 2 
    }
}

Here the &-style1 and &-style2 are the additional styles that has be used while re-using the component. Now when you have to use &-style1, simple add the following CSS classname to the classname attribute of the component. For example

<div classname={"component component-style1"}>

This may need to passed as a prop to make it dynamic. Passing style={'-style1'} as a prop in the component and inside the component we can use the following.

<div classname={"component component"+props.style}>

That's it!