为什么设置 dialogClassName 和使用 Styled JSX 的 Bootstrap 模态样式需要全局标记？

Question

我正在使用 Next.js (React) 和 Bootstrap 以及样式化的 JSX。我运行遇到一个问题，其中 Bootstrap 中的自定义 class 模态仅使用 css 样式，如果 css 是全局的。我在 Modal 上使用 dialogClassName 属性声明自定义 class。这是我的函数组件（我使用的是 Typescript）：

const Form: React.FunctionComponent<props> = (props: props) => {
  const [FormVisibility, FormDispatch] = useContext(FormContext);
  return (
      <Modal
        show={props.isVisible}
        onHide={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}
        backdrop="static"
        dialogClassName="custom-modal"
        >
        <Modal.Header closeButton >
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => {FormDispatch({ type: ActionTypes.CloseForm }) }}>
            Close
          </Button>
        </Modal.Footer>
        <style jsx global>{`
      .custom-modal {
        color: blue;
        height: 75vh;
        width: 75vw;
        max-width: none !important;
      }
      `}
      </style>
      </Modal>
  );
}

这很好用。但是，如果我将 <style jsx global> 更改为 <style jsx>，则不会应用样式。我在这里做错了什么还是有更好的方法来做到这一点？对我来说似乎很奇怪，即使组件在本地声明了 class，也需要 global。

谢谢！

Answer 1

我使用 Modals 的经验是，模态元素实际上是从组件所在的 DOM 树中提取出来的，并放置在 body 标签正下方的最顶层。

<body>
   // Component where the Modal is declared
   <Form />
   <div>
    // Modal appears here
    // Styles are not applied because Modal is not nested within Form component
   </div>
</body>

可能是因为这个原因没有应用您的本地样式。

为什么设置 dialogClassName 和使用 Styled JSX 的 Bootstrap 模态样式需要全局标记？

Why does styling a Bootstrap modal with dialogClassName set and using Styled JSX require the global tag?

css

jsx

twitter-bootstrap

reactjs

next.js