样式组件仅在使用 parcel 成功构建后呈现某些样式

Question

我有一个要嵌入到其他网站上的小部件，它是在带有样式组件的 React 中构建的。我用 parcel 将它构建到一个 js 文件中，然后提供该脚本以嵌入小部件。

问题是嵌入时并非我的所有样式都反映在小部件中。我知道我的样式自然会受到页面样式的影响；这不是关于那个。我的某些样式 根本没有显示 。甚至不是应用的样式，而是被父站点样式覆盖。

例如，我有一个按钮：

export const StyledFABButton = styled.button`
  z-index: ${zIndex("default")} !important; // NOTE: I've tried both with and without !important flags
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 5px !important;
  min-height: 60px !important;
  min-width: 60px !important;
  border: none !important;
  border-radius: 50% !important;
  box-shadow: ${(props) => props.theme.lightShadow} !important;
  background: papayawhip !important; // the only use of this colour int he whole project.
  transition: background 0.25s !important;
`

在此图像中，您可以看到有多少样式实际反映在前端：

似乎完全跳过了某些带样式的组件样式。我在 styled.main 上设置了一些样式，这就是您在 .juesmk class 上看到的样式。其他元素有一些颜色，一些有宽度等，但它就像样式组件混淆了，几乎。例如，某些不应该使用的彩色文本。

在开发工具样式 returns 中搜索 papayawhip 没有结果。如果您查看包裹构建文件，papayawhip 在那里：

我尝试过的事情：

使用cleanslate css重置页面样式。我已经通过 createGlobalStyles 实用程序尝试过此操作，并在我的 styled.main.
在目标站点的 body 和 head 中嵌入我的 script 标签。
对所有内容设置 !important。

这是确实具有正确样式的一个，即使我没有做任何不同的事情：

export const StyledIconWrapper = styled.figure`
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 5px !important;
  height: 100% !important;
  width: 100% !important;
`;

Answer 1

这可以通过添加 .babelrc 文件和 babel 插件来解决。您的文件应包含：

{
  "plugins": ["babel-plugin-styled-components"]
}

包裹会自动取走。

更多信息在这里： https://styled-components.com/docs/tooling#babel-plugin 在这里：https://parceljs.org/recipes/react/#css-in-js

编辑：您还可以通过使用 &&& 选择器避免使用 !important。在这里提供信息：https://styled-components.com/docs/faqs#how-can-i-override-styles-with-higher-specificity

样式组件仅在使用 parcel 成功构建后呈现某些样式

styled-components only rendering certain styles after successful build with parcel

javascript

css

reactjs

styled-components

parceljs