1

I tried to add style to RaisedButton,but it doesn't work,and 

<RaisedButton type="submit" label="Submit" style={{container:{borderRadius: "5px"}}} primary/>

And I also look this question,and still doesn't help:

<RaisedButton label="raised button" className="raised-button--rounded" />
.raised-button--rounded,
.raised-button--rounded button {
  border-radius: 25px; /* assuming one is not already defined */
}

My expected result is like this enter image description here

I want to make a rounded textfield and button.Can anyone give me some advice to help me with this.

Any help would be great appreciate!

Community
  • 1
  • 1
McGrady
  • 10,869
  • 13
  • 47
  • 69

1 Answers1

11

Here are the properties I used to copy that button style:

    <RaisedButton
      label="Submit"
      buttonStyle={{ borderRadius: 25 }}
      style={{ borderRadius: 25 }}
      labelColor={'#FFFFFF'}
      backgroundColor={"#0066e8"}
    />

  label: button label
  buttonStyle: shapes the portion that has the background
  style: shapes the underlying root element
  labelColor: changes the font color to white
  backgroundColor: changes the background color to dodger-blue

Gif of button with properties mentioned above:

enter image description here

TextField:

    <TextField
      underlineShow={false}
      color="white"
      type={'password'}
      value={'Foo'}
      inputStyle={{color: 'white', padding: '0 25px'}}
      style={{ backgroundColor: 'rgba(255,255,255,0.2)', borderRadius: 25 }}
    />
Yo Wakita
  • 5,322
  • 3
  • 24
  • 36