类型定义冲突

[usercao]

类型定义名称theme as与styled-components起冲突，最小实例地址:https://github.com/usercao/ice-test

[MinJieLiu]

看来得换名字咯

[MinJieLiu]

theme 不冲突， as 可以用 forwardedAs 代替

[MinJieLiu]

[MinJieLiu]

theme 还是换个名字吧，表现形式还不一样

[usercao]

自定义滚动条宽度和固定的滚动容器高度[例如select里防止继续resize高度]可以考虑下

[MinJieLiu]

固定的容器高度[select里防止继续resize高度] 场景体现在哪里，select 高度会一直 resize 吗

[usercao]

固定的容器高度[select里防止继续resize高度] 场景体现在哪里，select 高度会一直 resize 吗

我的错，我猜的会不会有这个问题，因为没有细滚动条还没写过select

[MinJieLiu]

https://github.com/MinJieLiu/mac-scrollbar/releases/tag/v0.9.0

[usercao]

@MinJieLiu forwardedAs没搞明白如何使用，我这样使用会触发TS类型错误

<Scrollbar forwardedAs='ul'>
  <div style={{ height: 2000 }}>{children}</div>
</Scrollbar>

const Wrapper = styled(MacScrollbar)<ScrollbarProps>`
  height: inherit;
`;

const Scrollbar: React.FC<ScrollbarProps> = (props: ScrollbarProps) => {
  const { forwardedAs,children, ...rest } = props;
  return (
    <Wrapper forwardedAs={'li'} {...rest}>
      {children}
    </Wrapper>
  );
};

最小实例地址https://github.com/usercao/ice-test

[usercao]

同时新版下会有如下警告

[MinJieLiu]

我觉得这是 vite 的问题，因为 在导出的 css 中提供了 map 文件，vite 没有正确解析

[MinJieLiu]

vitejs/vite#659

[usercao]

vitejs/vite#659

感谢🙏我明白了，请问可以看一下forwardedAs为什么类型错误吗？

[MinJieLiu]

有仓库吗

[usercao]

有仓库吗

https://github.com/usercao/ice-test 就是这个仓库里面的components->scrollbar组件
在layouts->BasicLayout里面引用了

[MinJieLiu]

const Scrollbar: React.FC<ScrollbarProps> = (props: ScrollbarProps) => {
  const { as, children, ...rest } = props;
  return (
    <Wrapper forwardedAs={as as keyof JSX.IntrinsicElements} {...rest}>
      {children}
    </Wrapper>
  );
};

[usercao]

@MinJieLiu 非常感谢🙏我TS写的有点少不好意思😂