如何根据反应组件的道具设置现有 css class 的颜色

Question

我正在尝试修改 videojs 库中现有 class 的样式（颜色）。

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

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

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

vjs-control-bar class 不在这里，因为它来自 video-js 图书馆

Answer 1

这里的 right 方法是使用其中一个 CSSinJS 库，并添加针对由您正在使用的 VideoJS 库呈现的 DOM 元素的规则.

另一种方法是在使用 dangerouslySetInnerHTML 属性渲染 <video> 组件的组件中简单地渲染一个 <style></style> 标签。

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

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

如何根据反应组件的道具设置现有 css class 的颜色

How to set color of existing css class, from props of a react component

css

reactjs

video.js