css - 将 CSS 变量作为 prop 传递给 react 组件

Question

我有这个组件，它可以根据组件收到的 Prop 颜色以不同的颜色显示。

const Card = ({color}) => {
  return (
    <p style={{color}}>Some Text</p>
  )
}

我有这些全局 css 变量:

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

有没有办法将这个 css 变量作为 prop 传递给“Card”组件？像这样:

import variableStyles from '../../styles/globalVariables.css'

const App = () => {
  return(
    <Card color={variableStyles['--text-clr']} />
  )
}

Answer 1

您可以将变量字符串作为 Prop 传递，并将其注入(inject)到 var() 中:

<p style={{ color: `var(${color})` }}>Some Text</p>

---

const Card = ({color}) => {
    return (
        <p style={{ color: `var(${color})` }}>Some Text</p>
    )
}

class Example extends React.Component {    
    render() {
        return (
            <React.Fragment>
                <Card color={'--card-clr-red'} />
                <Card color={'--card-clr-violet'} />
            </React.Fragment>
        );
    }
}

ReactDOM.render(<Example />, document.body);

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>