css - 覆盖按钮的文本颜色

Question

这是代码

export function ViewCurrentPitch(props){
    const actions = [
        <FlatButton
        label="Cancel"
        primary={true}
        onClick={props.closeEditPitch}
      />,
      <FlatButton
        className= 'flat-button'
        label="Save"
        primary={true}
        keyboardFocused={true}
        onClick={props.savePitchBeingEdited}
      />,
    ];

    console.log(props)
    return (
        <Card key={props.pitch.id} className = 'form-margin card-width' zDepth={3}>
            <CardText>{props.pitch.subject} </CardText>
            <CardText className='card'>{props.pitch.pitch}</CardText>
            <CardActions className= 'this-is-a-test'>
                <FlatButton className= 'flat-button' label="Edit" onClick={(e) => {props.toggleEdit(e, props.pitch); console.log(props.state)}}/>
                    <Dialog
                        className="dialogBox"
                        title="Test"
                        actions={actions}
                        open={props.editPitch}
                        contentStyle={customContentStyle}
                        autoScrollBodyContent={true}
                    >
                        <TextFieldExampleCustomize currentValue = {props.pitchBeingEdited} updateNewPitch = {props.updatePitchBeingEdited} />
                    </Dialog>
                <FlatButton className= 'flat-button' label="Delete" onClick={(e) => {props.deletePitch(e, props.pitch)}} />
            </CardActions>
        </Card>
    )
}

我正在尝试制作按钮 <FlatButton ...>不同的颜色。

我尝试在我的 .css 中添加样式文件

.flat-button {
  color: #1A237E;
}

我尝试了父组件和特定组件。两者似乎都不起作用。我需要将它作为内联样式传递吗？

我做错了什么>

Answer 1

相对于:http://www.material-ui.com/#/components/flat-button

您可以使用 style 属性覆盖样式，例如:

// Note: style is an object, not css
<FlatButton className='flat-button' style={color: 'pink'} />

或者将您正在使用的primary/secondary 颜色放入您的模板中，例如:

<FlatButton className='flat-button' primary=true />

FlatButton 似乎带有作用域 css，不应被经典 css 修改，更多:http://www.material-ui.com/#/customization/themes