如何在材质UI中设置按钮样式

您好我想使用不同颜色设置三个按钮的样式，但是当这些按钮被禁用时，我在开头添加的自定义样式将覆盖默认样式disabledTextColor，该样式会添加默认淡入淡出效果，透明度值，因此用户可以看到该按钮被禁用。如何设置禁用状态的风格或哪种风格的labelStyle和/或disabledTextColor风格的正确方法？下面是这种情况的一个例子如何在材质UI中设置按钮样式

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>

按钮始终保持红色，即使在真正的

来源

2016-11-28 Lido Fernandez

您好！我们需要更多的信息来提供有用的答案。看来你是说，材料的'disabled'按钮造型是压倒你的自定义样式，但目前还不清楚你想要什么风格或效果应用，怎么你正在努力完成它。你认为你可以澄清你想要做什么，并包含你的_relevant_代码样本？谢谢丽都！希望这可以帮助。 –

嗨@JacobFord感谢您的回答。我刚刚添加了更多的细节，希望你能帮助我。 –

禁用状态，您可以围绕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/

来源

2016-11-28 19:21:30

嗨@jeff感谢您的答案，看起来像一个好主意，但我怎么能让它更具可扩展性？因为这些将用于三种不同的按钮，其中三种不同的样式用于textColor和disabledTextColor。我是否必须为他们中的每一个制作自定义主题，并且他们三个都必须包装在muitheme组件中？ –

Hi @LidoFernandez，我用更好的解决方案更新了我的答案。希望你觉得它有用！ –

看起来天才！谢谢@ Jeff-McCloud –

如何在材质UI中设置按钮样式

回答

相关问题