Reactjs 左对齐按钮内的内容

我已经挣扎了好几个小时，现在试图将按钮内的图标和文本向左对齐。当前，按钮被拉伸，如下所示：

我希望V形箭头和文本在按钮内左对齐。如何做到这一点？（我使用的是microsofts ui fabric，不要认为这里的css会产生干扰，即使我删除它们或将DefaultButton更改为常规按钮，我也不会得到任何文本对齐）

渲染方法：

public render(): JSX.Element {
    const { isCollapsed } = this.state;
    const { buttonText, collapsibleSectionText } = this.props;
    return (
        <div>
            <DefaultButton
                onClick={this._toggleCollapse} className="CollapsibleSection"
            >
                {isCollapsed ? <i className="ms-Icon ms-Icon--ChevronUp" aria-hidden="true" /> : <i className="ms-Icon ms-Icon--ChevronDown " aria-hidden="true" />}
                &nbsp; <p>{buttonText}</p>
            </DefaultButton>
            {isCollapsed && collapsibleSectionText}
        </div>
    );
}

}快速回答：

justify-content: flex-start

---

如果你想了解更多，你可以玩这个精彩的游戏，它会让你对flexbox和它的定位有一个很好的了解

---

嗨，我只需要添加

文本对齐：左

就可以了

.CollapsibleSection {
    margin-top: 2%;
    text-align: left;
    width: 100%;
}

---

DefaultButton组件具有属性<代码>文本对齐：居中。你可以登记他们的官方文件。我建议您应该做的是尝试

text align:left如果这没有覆盖fabric的css规则，那么请尝试查看是否应用了您的规则，因为fabric的规则可能比您的css规则具有更大的特殊性。如果这不起作用，则需要覆盖结构的“显示”属性，并执行以下操作：

.CollapsibleSection {
  margin-top: 2%;
  width: 100%;
  display: flex; //overriding fabric's display inline-block;
  justify-content: flex-start:
}

游戏链接看起来非常相切，应该是一个注释。@tripleee它是对主要内容的一个添加，添加了一个CSS规则来修复它
.CollapsibleSection {
  margin-top: 2%;
  width: 100%;
  display: flex; //overriding fabric's display inline-block;
  justify-content: flex-start:
}