如何左对齐按钮中的标签

Question

如何使材料UI按钮左对齐标签？没有任何道具可以直接更改button元素上的内联样式，而我能想到的唯一方法是添加一个类并编写一些总的CSS选择器，例如thisClass> div> button。

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

Answer 1

我对带有图标的按钮有类似的问题。我通过证明内容来修复它：

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

Answer 2

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

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

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

在按钮上使用文本对齐：

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

在标签上使用浮动：

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