Storybook + Ionic React + styled-components CSS 顺序问题

Question

我有自定义组件，它使用 styled-components 库覆盖了 Ionic 的标准组件外观。在应用页面上，这个组件看起来不错。当我尝试将它与 Storybook 一起使用时，Ionic 似乎覆盖了我的自定义样式。经过一番发现，我发现 HTML header 中 style 标签的顺序发生了变化。首先包含来自 styled-components 的 CSS，然后是来自 Ionic 的 CSS。这导致样式优先顺序错误。

组件：

import styled from 'styled-components'
import { IonInput } from '@ionic/react'
import { TextInputProps } from './TextInput.types'

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

const TextInput = ({
  value,
  type = 'text',
  placeholder,
  onChange,
}: TextInputProps) => (
  <StyledIonInput
    value={value}
    type={type}
    onIonChange={onChange}
    placeholder={placeholder}
  />
)

export default TextInput

故事：

import { ComponentMeta, ComponentStory } from '@storybook/react'
import TextInput from './TextInput.component'

// eslint-disable-next-line import/no-default-export
export default {
  title: 'TextInput',
  component: TextInput,
} as ComponentMeta<typeof TextInput>

const Template: ComponentStory<typeof TextInput> = (args) => (
  <TextInput {...args} />
)

export const Default = Template.bind({})
Default.args = {
  placeholder: 'regular text-input',
}
Default.storyName = 'default'

export const Password = Template.bind({})
Password.args = {
  placeholder: 'password text',
  type: 'password',
}
Password.storyName = 'Password type'

带有装饰器配置的preview.js：

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css'

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css'
import '@ionic/react/css/structure.css'
import '@ionic/react/css/typography.css'

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css'
import '@ionic/react/css/float-elements.css'
import '@ionic/react/css/text-alignment.css'
import '@ionic/react/css/text-transformation.css'
import '@ionic/react/css/flex-utils.css'
import '@ionic/react/css/display.css'

import '../src/theme/variables.css'

import React, { useState } from 'react'

import { setupConfig } from '@ionic/react'
import { IonApp, IonContent, IonPage } from '@ionic/react'

/* Ionic framework configuration to enforce same look and feel across platforms */
setupConfig({
  rippleEffect: false,
  mode: 'ios',
})

const IonWrapper = ({ children }) => {
  return (
    <IonApp>
      <IonPage style={{ margin: '20px' }}>
        <IonContent>{children}</IonContent>
      </IonPage>
    </IonApp>
  )
}

export const decorators = [
  (Story) => (
    <IonWrapper>
      <Story />
    </IonWrapper>
  ),
]

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      // color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

样式优先级错误的示例。选定的行由 styled-components 生成。

任何建议将不胜感激！

Answer 1

styled-components 优先级规则起到了作用：

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