樣式組件僅在使用包裹成功構建后呈現某些 styles

Question

我有一個要嵌入到其他網站上的小部件，它是在帶有樣式組件的 React 中構建的。 我用 parcel 將它構建到一個 js 文件中，然后提供該腳本以嵌入小部件。

問題是我的 styles 在嵌入時並沒有全部反映在小部件中。 我明白我的styles自然會受到頁面styles的影響； 這不是關於那個。 我的一些 styles根本沒有出現。 甚至沒有應用 styles，而是被父站點 styles 覆蓋。

例如，這是我的一個按鈕：

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;
`

在此圖像中，您可以看到 styles 中有多少實際反映在前端：

似乎完全跳過了一些樣式化組件 styles。 我在 styled.main 上設置了一些styled.main ，這就是你在 .juesmk 上看到的.juesmk其他元素有一些顏色，一些有寬度等，但它就像樣式化的組件很混亂，幾乎。 例如，有些不應該使用彩色文本。

在 devtools Styles 中搜索papayawhip沒有返回任何結果。 如果您查看 parcel 構建文件， papayawhip在那里：

我嘗試過的事情：

• 使用cleanslate css重置頁面 styles。我已經通過createGlobalStyles util 嘗試過這個，並在我的styled.main中內聯。
• 將我的script標簽嵌入目標網站的body和head 。
• 對一切都設置!important 。

這是一個確實有正確的 styles，即使我對它沒有做任何不同的事情：

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