将变量作为标题传递给css答案

【问题标题】：Passing variable to css as title将变量作为标题传递给css
【发布时间】：2020-05-26 06:47:14
【问题描述】：

我看到你可以在 css 中创建“变量”：

https://www.w3schools.com/cssref/func_var.asp

我的文件：

(style.css file)

[title~=--myVariable] {
    color: red
}

(App.js file)
...
return (
    <div className="App">
      <h1 title="thisIsTheTitle"> Some text in red color ? </h1>
    </div>
  )

是否可以这样做，如果我的标题有标题，那么颜色是红色否则停留在（黑色）

更新我忘了初始化 myVariable，所以：

(style.css file)

:root {
  --myVariable: white;
}

【问题讨论】：

我在您的代码中没有看到任何 css 自定义属性（css 变量的另一个名称）
恐怕不行。 CSS vars 仅与 CSS 一起使用，不能从 JS 代码中注入。查看动态样式解决方案，例如 JSS 或 styled-components。它们允许使用 JS 在代码中创建样式。
我最终将不得不使用它们，但如果无法使用上层，那么它将无法工作......（因为我会通过它们做出反应，但仍然 -> 现在标题检查字符串“myVariable”，我希望变量的值在那里......我更新了问题
@Fyodor 问题是我在反应中使用了外部组件（库？），并且在某些元素中没有实现样式，所以我试图添加它，如上所示。所以不幸的是，你的解决方案对我没有帮助。

标签： javascript css reactjs react-native css-selectors

【解决方案1】：

您可以使用 css var() 设置回退。

但请注意：

var() 函数不能用于属性名称、选择器或除属性值之外的任何其他内容 MDN

更新：我看到你正在编辑，所以上面的引用不起作用。

【讨论】：

问题是我的标题是动态创建的。我不知道会是什么。

【解决方案2】：

回答这部分：

是否可以这样做，如果我的标题有标题，则颜色为红色，否则保持为（黑色）

(style.css 文件)

.App h1 {
    color: black;
}

.red {
    color: red;
}

（App.js 文件）

...
function App({ headerTitle }) {
return (
    <div className="App">
      <h1 title={ headerTitle }
     className={headerTitle ? 'red' : null } > 
        Some text in red color ? </h1>
    </div>
  )
}

【讨论】：