将按钮的文本左对齐

Question

我有下一个代码：

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

 ....

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

Answer 1

您可以为此设置“文本对齐”

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

或者你可以定义 aclass并设置它的 CSS

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

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