css - 如何从 react 组件的 Prop 设置现有CSS类的颜色

Question

我正在尝试修改 videojs 库中现有类的样式(颜色)。

我发现我们可以从 css 文件修改。但是我需要修改我们从 react Prop 中获得的颜色，每次都是动态的。

因此，我们有一个来自 videojs 库的名为 vjs-control-bar 的类，我们需要对其应用 color 属性，其值来自 react-例如 Prop 。 this.props.color。我们如何才能做到这一点？

<div data-vjs-player>
  <video ref={node => (this.videoNode = node)} className="video-js" />
</div>

vjs-control-bar 类不在这里，因为它来自 video-js 库

Answer 1

此处正确的方法是使用其中一个 CSSinJS 库并添加以您正在使用的 VideoJS 库呈现的 DOM 元素为目标的规则。

另一种选择是简单地呈现一个 <style></style>在呈现 <video> 的组件中标记使用 dangerouslySetInnerHTML 的组件 Prop 。

这是一个如何工作的例子:

function InnerComponent() {
  return <h1 class="title">Text Color</h1>;
}

function App(props) {
  return (
    <div className="App">
      <style
        dangerouslySetInnerHTML={{
          __html: `
        .title {
          color: ${props.color};
        }
      `
        }}
      />
      <h1>Hello CodeSandbox</h1>
      <InnerComponent />
    </div>
  );
}

这是沙箱 - https://codesandbox.io/embed/white-star-9o897