如何在按钮中左对齐标签

Question

如何获取材质UI按钮以对齐标签？没有道具可以直接更改按钮元素上的内联样式，我可以想象的唯一方法是添加一个类并编写一些像css＆gt;这样的粗css选择器。 div>按钮。

http://www.material-ui.com/#/components/raised-button

Answer 1

您可以使用元素上的absolute属性为标签labelStyle定位。 这有效：

 <RaisedButton 
  label="Primary" 
  primary={true} 
  lableStyle={{position: 'absolute',top: 0,left: -10}} />

编辑：使用更好的方法更新我的答案

在按钮上使用文字对齐：

  <RaisedButton 
   style={{textAlign: 'left'}}
   label="Primary" 
   primary={true}/>

在标签上使用float：

  <RaisedButton 
   lableStyle={{float: 'left'}}
   label="Primary" 
   primary={true}/>

Answer 2

带有图标的按钮也有类似的问题。我通过证明内容来解决它：

<Button 
  startIcon={<AccountCircleIcon/>}
  fullWidth={true}
  style={{justifyContent: "flex-start"}}>
  button text
</Button>