React环境下MGT组件样式配置及PersonPicker模板使用方法咨询

思路验证 #

你的思路是正确的。MGT组件基于Web Component构建，默认开启Shadow DOM隔离，普通全局CSS无法直接作用到内部节点，这就是你调整margin不生效的核心原因，使用模板自定义是最灵活的适配方案。

优先推荐简便调整方案 #

不需要先尝试CSS方案，比改写模板成本更低：MGT公开了Shadow DOM内部节点的part属性，你可以直接用CSS的::part选择器穿透隔离修改样式：

/* 调整PersonPicker根容器的外边距 */
mgt-person-picker::part(root) {
  margin-left: 0 !important;
}

/* 如果是输入框本身的margin异常，用这个选择器 */
mgt-person-picker::part(input) {
  margin-left: 0 !important;
}

你项目内的reactstrap通用样式类也可以直接写在对应的选择器内完成样式统一。

PersonPicker模板使用示例 #

如果CSS方案无法覆盖你的自定义需求，可以用模板重写对应节点：

import { MgtPersonPicker, Templates } from '@microsoft/mgt-react';

const CustomPersonPicker = () => {
  // 重写输入框模板，绑定原有功能的同时注入reactstrap样式
  Templates.render('person-picker-input', (context) => {
    return (
      <div className="form-control" style={{ marginLeft: 0 }}>
        <input
          type="text"
          placeholder={context.placeholder}
          onChange={context.onInput}
          value={context.searchText}
        />
      </div>
    )
  })

  return <MgtPersonPicker />
}

如果需要调整整个组件的外层容器样式，可以重写根模板：

Templates.render('person-picker', (context) => {
  return (
    <div className="reactstrap-form-group" style={{ margin: 0 }}>
      {context.children}
    </div>
  )
})

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