How to change style of an imported component? - css

Question

I'm importing this component into NewComponent.jsx
import OptionsMenu from "../../components/OptionsMenu/OptionsMenu";
where it's rendered as such:
<OptionsMenu
options={[
{
icon: "trash-alt",
action: () => this.toggleDeleteModal(index),
title: "Delete",
},
]}
/>
The options menu component uses a file called styles.js which has a colour set too:
export const OptionsMenuDropDown = styled.div`
position: absolute;
top: -40px;
left: -200%;
color: #0F4379;
So it's usage would be
<OptionsMenuDropDown>
<ol>
{options.map((option, index) => {
return (
<li>
<button className="options-btn" key={index} onClick={option.action}>
<p >{option.title}</p>
</button>
</li>
);
})}
</ol>
</OptionsMenuDropDown>
Is it possible to change this colour when its being used in NewComponent.jsx ? So that I can override it with another colour?
I cannot use a separate .css file for NewComponent.jsx but can use a styles.js. There is also a global css file too

Answer 1

You can pass a prop into your styled component, like the color.
const OptionsMenu = ({color}) => {
return (
<OptionsMenuDropDown color="color">
<ol>
{options.map((option, index) => {
return (
<li>
<button className="options-btn" key={index} onClick={option.action}>
<p >{option.title}</p>
</button>
</li>
);
})}
</ol>
</OptionsMenuDropDown>
)
}
Then in your styles.js.
export const OptionsMenuDropDown = styled.div`
position: absolute;
top: -40px;
left: -200%;
color: ${props => props.color};
Then you can use it in you NewComponent passing another color as a prop.
const NewComponent = () => {
<OptionsMenu color="#fff" />
}