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;
}

我尝试了父组件以及特定组件。似乎都没有用。我是否需要将其作为内联样式传递？

我做错了什么＆gt;

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

Answer 2

在样式化时，您应该在组件上使用style属性。有关此类样式的更多信息，请参阅此处：https://survivejs.com/react/advanced-techniques/styling-react/

覆盖按钮的文本颜色

2 个答案: