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

Posted 2023-02-19

【中文标题】Storybook + Ionic React + styled-components CSS 顺序问题

【英文标题】：Storybook + Ionic React + styled-components CSS order issues

【发布时间】：2021-12-11 10:06:06

【问题描述】：

我有自定义组件，它使用 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 生成。

任何建议将不胜感激！

【参考方案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;
  
`