如何在 material-ui 中设置按钮样式

Question

您好，我想为三个按钮设置不同颜色的样式，但是当这些按钮被禁用时，我在开头添加的自定义样式会覆盖默认样式 disabledTextColor，它会添加默认的淡入淡出和透明度值，以便用户可以看到该按钮被禁用。如何设置禁用状态的样式，或者哪种应该是设置 labelStyle and/or disabledTextColor 样式的正确方法？这是一个例子

const style = {
      labelStyle: {
        color: 'red;
      }
    }

<FlatButton
        label='Mit Linkedin anmelden'
        labelPosition='after'
        icon={<LinkedinIcon />}
        onClick={() => Meteor.loginWithLinkedin()}
        disabled={true}
        labelStyle={style.labelStyle}
      />
    </div>
    <div className='mdl-cell mdl-cell--12-col'>
      <FlatButton
          label='Mit Google anmelden'
          labelPosition='after'
          icon={<GoogleIcon />}
          onClick={() => Meteor.loginWithGoogle()}
          disabled={true}
          labelStyle={style.labelStyle}
        />
    </div>

在这种情况下，即使禁用状态为 True，按钮也始终保持红色

Answer 1

您可以围绕 FlatButton 创建一个小的包装器组件，当按钮被禁用时有条件地淡化 labelStyle。

const CustomFlatButton = (props) => (
  <FlatButton
    {...props}
    labelStyle={{ ...props.labelStyle, opacity: props.disabled ? 0.3 : 1 }}
    />
);

...

<CustomFlatButton label="Disabled Red" style={{ color: 'red' }} disabled />

https://jsfiddle.net/6rads3tt/2/

如何在 material-ui 中设置按钮样式

How to style a buttons in material-ui

material-ui