Storybook IonicReact styled-componentsCSS順序問題

我有自定義組件，它使用樣式組件庫覆寫了 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$/,
    },
  },
}

樣式錯誤優先級的示例。所選行由樣式組件生成。

任何建議將被認真考慮！

uj5u.com熱心網友回復：

樣式組件優先級規則起到了作用：

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

標籤：反应 离子框架 故事书

上一篇：盡管index.html和manifest.json發生了變化，但iOS15.1SafariPWA狀態欄顏色保持綠色

下一篇：通過Chrome上傳檔案的潛在問題？