按钮禁用背景颜色内联样式属性 jsx答案

【问题标题】：button disabled background color inline style attribute jsx按钮禁用背景颜色内联样式属性 jsx
【发布时间】：2019-03-02 16:41:47
【问题描述】：

我有一种情况，我只能将属性传递给 jsx 组件，但我不能使用标准的 css 类（组件不可访问，只能通过将属性传递给其父组件来设置样式）。有没有办法使用内联样式属性设置禁用按钮的背景颜色？

编辑我得到的最接近的是 style: {[disabled=true]:{backgroundColor: "red"}} 但我得到 Uncaught ReferenceError: disabled is not defined

【问题讨论】：

标签： css jsx

【解决方案1】：

请问您是否将 disabled 作为 props 传递给组件？

如果是这样，你可以在下面做

const isDisabled = {
   backgrondColor: 'red'
};

<button style={disabled ? isDisabled : null}>
   Button 1
</button>

【讨论】：

【解决方案2】：

是的。像这样的东西应该可以工作：

定义你的风格：

const disabled = {
  backgroundColor: "red"
};

那么无论你的按钮组件出现在哪里：

<Button style={disabled}>
  Example Button
</Button>

祝你好运！

【讨论】：