如何居中Polaris的DisplayText，以及Shopify Polaris组件通用样式设置方法

直接设置className/行内样式无效的原因 #

Polaris为了保障设计系统的全局一致性，默认会屏蔽用户主动传入的自定义className和内联样式，因此直接修改不会生效。

任意Polaris组件的通用自定义样式方法 #

• 优先使用Polaris官方提供的布局组件包裹目标组件，通过布局组件的自带属性控制样式，这是官方最推荐的实现方式，不会出现版本兼容问题
• 若有特殊定制需求，可在目标组件外层套一个带自定义类名的普通DOM标签，通过CSS后代选择器命中Polaris组件自带的原生类名来覆盖样式
• 可直接使用Box组件的as属性，将Box渲染为任意指定的Polaris组件，Box组件支持所有常用样式属性，可以直接配置间距、对齐方式等样式

DisplayText居中的具体实现 #

方案1（官方推荐，无兼容问题） #

用Box组件包裹或者直接通过as属性渲染，示例代码：
首先导入依赖：
import { DisplayText, Box } from '@shopify/polaris';
写法1：外层包裹实现

<Box textAlign="center">
  <DisplayText size="large">Contact</DisplayText>
</Box>

写法2：直接用Box渲染DisplayText，代码更精简

<Box as={DisplayText} size="large" textAlign="center">
  Contact
</Box>

方案2（自定义CSS实现） #

外层加自定义容器，通过后代选择器覆盖样式：
JSX代码：

<div className="display-text-wrapper">
  <DisplayText size="large">Contact</DisplayText>
</div>

对应CSS代码：

.display-text-wrapper .Polaris-DisplayText {
  text-align: center;
}

注意：自定义CSS覆盖的方案需要对应Polaris版本的组件原生类名不变，版本升级时需要校验样式是否正常。

内容的提问来源于stack exchange，提问作者IonicMan