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

Posted 2023-02-22

【中文标题】有啥方法可以将状态变量导出/传递到 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 中的数据是一串颜色名称。

【参考方案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>
    )