React 本地化全局样式？

Question

是否可以将模块的全局样式本地化到一个文件？

例如，我想从反应模块更改项目的宽度，但仅限于一个文件。 内联样式是不可能的：/

编辑上下文：在我的特殊情况下......我正在使用'react-multi-carousel'......并且为了检查断点行为，我设置.react-multi-carousel-item { width: 310px !important; } .react-multi-carousel-item { width: 310px !important; } 。 但是，我希望这种样式仅应用于一个组件，而不是我的整个项目（我在多个地方使用轮播）。 有什么方法可以本地化全局样式（CSS 文件）？

Answer 1

您只需嵌套 CSS 规则以仅在特定容器内应用：

.my-container .react-multi-carousel-item { width: 310px !important; }

然后在 React 中：

return <>
  <MultiCarousel />
  <div className="my-container">
    <MultiCarousel />
  </div>
</>

在该示例中，第一个<MultiCarousel />不会看到额外的样式，但第二个会。

---

“有没有办法在 TSX 文件中添加 css？如果可能的话，我希望没有外部 css 文件。”

您可以尝试使用范围样式标签

例如：

return <>
  <div>
    <style scoped>{`
      .react-multi-carousel-item {
        width: 310px !important;
      }
    `}</style>
    <MultiCarousel />
  </div>
</>