Question

您好我想要设置三个不同颜色的按钮，但是当这些按钮被禁用时，我在开头添加的自定义样式会覆盖默认样式disabledTextColor，它会添加默认的淡入淡出和透明度值，这样用户就可以看到按钮被禁用。如何设置禁用状态的样式，或者哪种方式可以正确设置labelStyle和/或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/

如何设置材质中的按钮样式-ui

1 个答案: