如何禁用样式组件的自动转换？答案

【问题标题】：How to disable an automatic conversion of styled-components?如何禁用样式组件的自动转换？
【发布时间】：2022-06-18 20:35:16
【问题描述】：

我正在开发一个项目，该项目使用样式化组件作为 javascript 中样式化 css 的一种方式。但它会自动添加 css 属性以使其与旧浏览器兼容。对我来说这有点不必要，而且它对网站加载的影响更大，所以我想在 styled-components 中禁用此功能。我正在使用 webpack 和 babel。

我举个例子。

这是我想要得到的代码：

.dialog-container {
  display: flex;
}

编译后的代码如下：

.dialog-container {
  display: flex;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
}

【问题讨论】：

标签： reactjs webpack styled-components

【解决方案1】：

您需要将应用程序包装在 StyleSheetManager 组件中。

您还需要将 disableVendorPrefixes 属性传递给他。然后供应商前缀将被禁用。

文档：https://styled-components.com/docs/api#stylesheetmanager

在下面的示例中，您不会看到 flex 属性的前缀。

import styled, { StyleSheetManager } from "styled-components";

const Component = styled.div`
  display: flex;
`;

const App = () => (
  <StyleSheetManager disableVendorPrefixes>
    <Component>2</Component>
  </StyleSheetManager>
);

【讨论】：