将按钮的文本对齐到左侧

时间:2017-06-03 05:23:51

标签: css reactjs ecmascript-6

我有下一个代码:

<button onClick={this.openModal}>[{this.props.defaultValue}]</button>

获得的文字
[{this.props.defaultValue}]

始终居中。有没有办法让它与左边对齐?

这就是我目前的尝试:

const bstyle = { 
        textAlign:'left',
        color: 'white'
     };
    const {open} = this.state;
    return (
            <div>
            <button style={bstyle} onClick={this.onOpenModal}>[{this.props.defaultValue}]</button>

 ....

没有结果。 :-( 我可以看到按钮左侧对齐。但它的文本以中心为主。

2 个答案:

答案 0 :(得分:1)

您可以设置&#39; text-align&#39;为此

<button onClick={this.openModal} style="text-align: left;">[{this.props.defaultValue}]</button>

或者您可以定义class并设置它的CSS

<button onClick={this.openModal} class="text-left">[{this.props.defaultValue}]</button>

<style>
    .text-left{
        text-align: left;
    }
</style>

答案 1 :(得分:1)

样式需要object

  

在React中,内联样式未指定为字符串。相反,他们   使用一个对象来指定,该对象的键是camelCased版本的   样式名称,其值是样式的值,通常是   字符串。

padding-left设置为0px;

这样写:

<button onClick={this.openModal} style={{paddingLeft:'0px'}}>{this.props.defaultValue}</button>

检查一下:

var App = () => {
   return (
      <div>
         <button style={{paddingLeft:'0px'}}>Hello World</button>
      </div>
   )
}

ReactDOM.render(<App/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>