Storybook+Ionic React环境下styled-components样式被Ionic覆盖如何解决

你遇到的问题是同优先级CSS选择器的加载顺序导致的：Storybook构建后Ionic的静态CSS样式被插入到了styled-components动态生成的样式标签之后，按照CSS规则，后加载的同优先级样式会覆盖先加载的样式。

方案1：提升styled-components样式优先级（最简便，无需修改配置） #

直接修改你的自定义组件代码，用&&语法提升样式权重，该语法会让styled-components生成的选择器重复两次类名，优先级高于Ionic默认的单类选择器，完全不受加载顺序影响：

const StyledIonInput = styled(IonInput)`
  && {
    font-weight: normal;
    line-height: 24px;
    height: 40px;
    border: 1px solid #d3d3d3;
    border-radius: 50px;
    --padding-start: 20px;
    --padding-left: 20px;
  }
`

如果仍有极个别样式被覆盖，可以叠加!important兜底，绝大多数场景下仅用&&就可以解决问题。

方案2：调整styled-components样式插入位置（从根因解决加载顺序问题） #

通过styled-components提供的StyleSheetManager配置，强制让styled生成的样式标签插入到head的最末尾，保证优先级高于提前加载的Ionic静态样式。
修改你的.storybook/preview.js代码：

1. 首先引入StyleSheetManager

import { StyleSheetManager } from 'styled-components'

2. 修改装饰器的包裹逻辑，用StyleSheetManager包裹原有内容：

const IonWrapper = ({ children }) => {
  return (
    <StyleSheetManager 
      shouldForwardProp={(prop) => prop !== 'className'}
      {/* styled-components v6 可额外加下面的配置保证样式追加到末尾 */}
      {/* options={{ prepend: false }} */}
    >
      <IonApp>
        <IonPage style={{ margin: '20px' }}>
          <IonContent>{children}</IonContent>
        </IonPage>
      </IonApp>
    </StyleSheetManager>
  )
}

方案3：调整Storybook静态资源加载顺序 #

如果上述两个方案都不生效，可以修改Storybook的webpack配置，强制让Ionic的CSS在所有业务样式之前加载：
在你的.storybook/main.js里添加webpack配置：

module.exports = {
  // 保留原有其他配置
  webpackFinal: async (config) => {
    // 把Ionic核心CSS放在入口最前面加载
    config.entry.unshift(
      require.resolve('@ionic/react/css/core.css'),
      require.resolve('@ionic/react/css/normalize.css'),
      require.resolve('@ionic/react/css/structure.css'),
      require.resolve('@ionic/react/css/typography.css'),
      require.resolve('@ionic/react/css/padding.css'),
      require.resolve('@ionic/react/css/float-elements.css'),
      require.resolve('@ionic/react/css/text-alignment.css'),
      require.resolve('@ionic/react/css/text-transformation.css'),
      require.resolve('@ionic/react/css/flex-utils.css'),
      require.resolve('@ionic/react/css/display.css'),
      require.resolve('../src/theme/variables.css')
    )
    return config
  }
}

修改完成后删除preview.js里对应的Ionic CSS和全局变量CSS的import语句，避免重复加载即可。

内容的提问来源于stack exchange，提问作者a13xg0