Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

【关于给styled.div等声明方式生成的组件,赋予class属性时,出现的bug,请详见描述和代码截图】 #32

Closed
panchaoco opened this issue Nov 7, 2024 · 2 comments

Comments

@panchaoco
Copy link

panchaoco commented Nov 7, 2024

bug描述

当我给styled.div等声明方式生成的组件,赋予class属性时,由插件自动生成的styled-xxxx类名被覆盖了而不是合并,导致样式失效

Reproduce link

No response

To reproduce

const GameHeaderLayout = styled.div`
  display: flex;
  align-items: center;
  gap: 0 4px;
  padding: 12px 0;
  position: relative;
  &.is-line {
    &::after {
      position: absolute;
      content: '';
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: ${props => props.theme.border100};
      transform: scaleY(0.5);
    }
  }
  .title {
    color: ${props => props.theme.primary};
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 16px; /* 114.286% */
  }
`

type StatisticsHeaderProps = {
  title: string
  icon: VNode
  isLine?: boolean
}

export const GameHeader: FunctionalComponent<StatisticsHeaderProps> = props => {
  const { isLine = true } = props
  return (
    <GameHeaderLayout
      className={classNames('game-header', {
        'is-line': isLine,
      })}
    >
      {props.icon}
      <div className="title">{props.title}</div>
    </GameHeaderLayout>
  )
}

以上的代码,如果给GameHeaderLayout复制一个class或者className, 会导致样式丢失, 经过排查,发现如下截图描述的问题:

image

Expected behavior

期望当我赋值类名给styled的组件时,类名是应该是合并而不是覆盖重置

Actual behavior

No response

Package version

No response

Framework version

No response

Node version

No response

Browsers version

No response

OS version

No response

Additional context

No response

@akinoccc
Copy link
Collaborator

akinoccc commented Nov 7, 2024

className是会把原有的类名都覆盖掉,试下用class吧,class是没问题的

@panchaoco
Copy link
Author

className是会把原有的类名都覆盖掉,试下用class吧,class是没问题的

好的,谢谢

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants