如何制作圆形RaisedButton和Textfield

Question

我尝试将样式添加到RaisedButton，但它不起作用，

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

我也看this question，但仍然没有帮助：

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

我的预期结果是这样的

我想制作一个圆形的文本字段和按钮。任何人都可以给我一些建议来帮助我。

任何帮助都会非常感激！

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：

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