有什么方法可以将状态变量导出/传递到 ReactJS 中的外部 CSS 文件答案

【问题标题】：Is there any way to export/pass a state variable to an external CSS file in ReactJS有什么方法可以将状态变量导出/传递到 ReactJS 中的外部 CSS 文件
【发布时间】：2020-12-08 08:55:27
【问题描述】：

const Dropdown = ({ options, selected, onSelectedChange }) => {
    const [ open, setopen ] = useState(false);


    const renderedOptions = options.map((option) => {
        if (option.value === selected.value) {
            return null;
        }

        return (
            <div key={option.value} className="item" onClick={() => onSelectedChange(option)}>
                {option.label}
            </div>
        );
    });

    return (
        <div className="ui form">
            <div className="field">
                <label className="label">Select a color</label>
                <div onClick={() => setopen(!open)} className={`ui selection dropdown ${open ? 'visible active' : ''}`}>
                    <i className="dropdown icon" />
                    <div className="text">{selected.label}</div>
                    <div className={`menu ${open ? 'visible transition' : ''}`}>{renderedOptions}</div>
                </div>
            </div>

            //Here is the selected.value state (value contains string of color name
            {<div style={{ color: `${selected.value}` }}>{selected.value}</div>}
        </div>
    );
};

export default Dropdown;

const options = [
    {
        label: 'The Color Red',
        value: 'red'
    },
    {
        label: 'The Color Green',
        value: 'green'
    },
    {
        label: 'The Color Blue',
        value: 'blue'
    }
];

如何在外部 CSS 文件中使用 selected.value？

selected.value 中的数据是一串颜色名称。

【问题讨论】：

标签： javascript css node.js reactjs sass

【解决方案1】：

使用 CSS 样式表的另一种方式。
通常，当我需要传递一个值以将其用于 CSS 时，我会
选择特定的 CSS 类，因为我更喜欢使用样式表
出于可伸缩性原因 &
易于访问。如果它可以帮助...

我。已知值大小写/无需转换成word
期望（似乎应该是[蓝色，红色，绿色]）
```
  <div className = { selected.value } />
```
二。需要转成word
假设您需要更改一个可以是十六进制值的 selected.value，您需要关联一个稍后可用于 CSS 的单词 className。
这只是一个示例，您可以执行传递的表达式中的更多内容
```
  // convert anticipated value to the word you need
  const colors = {'#F00': 'red', '#0F0' : green, '#00F': 'blue'};
```
```
  <div className = { colors[ selected.value ] } />
```

?应用示例

  import './style.css' // style.css as same level of your component

  const Dropdown = ({options,...}) => {
    // if need to make wording *(cf:. case )
    // const color = {'#F00': 'red', '#0F0' : green, '#00F': 'blue'};

    //...
    return (
        //...
        // if need to make wording *(cf:. case )
        // <div className = { colors[ selected.value ] }> { selected.value } </div> */ }
        <div className = { selected.value }> { selected.value } </div>
     )
    }

适用于上述情况的 CSS。

/*CSS file: style.css*/
.red { ...code... }
.green { ...code... }
.blue { ...code... }

【讨论】：

【解决方案2】：

这是我使用 URL 中的概念解决它的方法

import styles from './colorchange.css';

//...

//For setting default value (and closing dropdown when clicked outside)
useEffect(() => {
        document.body.addEventListener('click', (event) => {
            if (ref.current.contains(event.target)) {
                return;
            }
            setopen(false);
        });

        document.documentElement.style.setProperty(`--variablename`, selected.value);
    }, []);

//...

//inside renderedoption
return (
            <div
                key={option.value}
                className="item"
                onClick={() => {
                    onSelectedChange(option);
                    document.documentElement.style.setProperty(`--variablename`, option.value);
                }}
            >
                {option.label}
            </div>
        );

//....
//for printing the color
<div className="colorcolor">This text is: {selected.value}</div>


CSS FILE:

 {
    --variablename: default;
}

.colorcolor {
    color: var(--variablename);
}

【讨论】：

【解决方案3】：

如果您正在寻找样式化组件，您可能可以使用它，这只是一个示例，没有经过深思熟虑。该组件可以在另一个文件中

const HoveredLink = styled.span`
    color: ${props => props.selected ? 'black' : 'rgb(150, 153, 156)'};
`

<HoveredLink selected={\\someconditionhere} > Hover me <HoveredLink/>

【讨论】：

【解决方案4】：

您可以简单地用作变量，这不完全是 CSS。所以这个应该可以工作：

<div style={{color: selected.value}} >{ selected.label } </div>

您也可以将样式设置为新变量：

const Dropdown = ({options,...}) => {
    const styleDiv = {
        color: options.value
    }
    //...
    return (
        //...
        <div style={styleDiv}> {options.label} </div>
    )
}

【讨论】：