CODEWITHSUNDEEP
cssreactjsmaterial-design
dropWizard
dropWizard

Reputation: 3538

Overriding the text color of a button

Here is the code

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

I am trying to make the button <FlatButton ...> a different color.

I tried adding the style in my .css file

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

I tried on both the parent component as well as the specific component. Neither seem to work. Do I need to pass it as an inline style?

What am I doing wrong>

Upvotes: 0

Views: 338

Answers (2)

pirs
pirs

Reputation: 2463

Relative to : http://www.material-ui.com/#/components/flat-button

You can override the style with the attribute style like:

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

Or put the primary/secondary color you are using in your template, like:

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

FlatButton seems to be with a scoped css and shouldn't be modified by classic css, more : http://www.material-ui.com/#/customization/themes

Upvotes: 1

Axel
Axel

Reputation: 36

You should use the style property on the component when styling. For more this type of styling, and other techniques see here: https://survivejs.com/react/advanced-techniques/styling-react/

Upvotes: 0

Related Questions