如何制作圆形的 RaisedButton 和 Textfield

Question

我尝试给 RaisedButton 添加样式，但是没有用，而且

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

我也看了，但还是没用:

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

我的预期结果是这样的

我想制作一个圆形的文本字段，button.Can任何人都可以给我一些建议来帮助我。

任何帮助将不胜感激！

Answer 1

以下是我用来复制该按钮样式的属性：

    <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：

文本字段：

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

如何制作圆形的 RaisedButton 和 Textfield

how to make rounded RaisedButton and Textfield

reactjs

material-ui