如何根据反应组件的道具设置现有 css class 的颜色
How to set color of existing css class, from props of a react component
我正在尝试修改 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
图书馆
这里的 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>
);
}
我正在尝试修改 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
图书馆
这里的 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>
);
}