![](/img/trans.png)
[英]How to stop background style from overriding backgroundColor style of React inline-style?
[英]reactjs - how to set inline style of backgroundcolor?
我想设置一些元素的样式属性,但我没有正确的语法。 任何人都可以建议我错在哪里?
import React from 'react';
import debug from 'debug'
const log = debug('app:component:Header');
var bgColors = { "Default": "#81b71a",
"Blue": "#00B1E1",
"Cyan": "#37BC9B",
"Green": "#8CC152",
"Red": "#E9573F",
"Yellow": "#F6BB42",
};
export default class SideBar extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<a style="{{backgroundColor: {bgColors.Default}}}" >default</a>
<a style="{{backgroundColor: {bgColors.Blue}}}" >blue</a>
<a style="{{backgroundColor: {bgColors.Cyan}}}" >cyan</a>
<a style="{{backgroundColor: {bgColors.Green}}}" >green</a>
<a style="{{backgroundColor: {bgColors.Red}}}" >red</a>
<a style="{{backgroundColor: {bgColors.Yellow}}}" >yellow</a>
);
}
}
更新:对于任何看这个的人,请参阅评论这不是正常工作的代码。
https://facebook.github.io/react/tips/inline-styles.html
你不需要报价。
<a style={{backgroundColor: bgColors.Yellow}}>yellow</a>
你的报价是错误的。 这是一个简单的例子:
<div style={{backgroundColor: "#FF0000"}}>red</div>
如果你想要多种风格,这是正确的完整答案。 这是与类和风格的div:
<div className="class-example" style={{width: '300px', height: '150px'}}></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.