I'm working on customizing a re-useable table component using vanilla CSS. I have defined six color variables and want users to be able to select one of them to change the table header background color. However, I am unsure how to make this color choice a prop on the component.
Here are the color variables defined in my CSS file:
th {
--deq-primary: #0080b7;
--daq-primary: #1ab7da;
--ddw-primary: #147995;
--dwq-primary: #034a64;
--derr-primary: #05a68b;
--dwmrc-primary: #f26322;
}
th {
background-color: var(--deq-primary);
color: white;
border: 1px solid #cecece;
}
Is it possible to set a prop on my table component to allow users to choose one of these colors for the header background?
For instance:
<MyTable headerColor="ddw-primary" />
If implemented, this would change the header color to ddw-primary.
UPDATE:
I have successfully incorporated Hugo Elhaj-Lahsen's suggestion. The variable name is passed as a string and I adjusted the example code provided to include the necessary -- before the variable name. Therefore, the final style tag now looks like this:
return <table style={{backgroundColor: `var(--${headerColor})` }}>
{// ...}
</table>
....
>
When using the component, I pass the variable name as a string:
<MyTable
columns={columns}
data={data}
headerColor="my-color-variable-name"
/>