代码之家 › 专栏 › 技术社区 › Knows Not Much

将道具传递给Typescript中的React样式化组件

styled-components typescript

Knows Not Much · 技术社区 · 4 年前

我用typescript编写了这个样式化的组件。这是根据他们的 documentation

    import matrix from '../img/matrix.jpg';
    const Style = styled.div`
      .fixed {
        background-image: url(${props => props.image ? props.image : "../img/default.jpg"})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `;
    export const FixedBackground = () => {return (
      <Style image={matrix}>
      </Style>
    )};

但是它抛出了一个编译错误

Property 'image' does not exist on type 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, \"slot\" | \"style\" | \"title\" | ... 251 more ... | \"onTransitionEndCapture\"> & { ...; }, any>'

我还试图编写我的样式组件

    const Style = (props: {image: string}) => {return (styled.div`
      .fixed {
        background-image: url(${props.image})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `)};
    export const FixedBackground = () => {return (
      <Style image={matrix}>
      </Style>
    )};

但它再次抛出编译时错误

Type '{ children: never[]; image: string; }' is not assignable to type 'IntrinsicAttributes & { image: string; }'. Property 'children' does not exist on type 'IntrinsicAttributes & { image: string; }'."

2 回复 | 直到 4 年前

buzatto 4 年前

试着这样做:

interface StyleProps {
  image?: string;
} 

const Style = styled.div<StyleProps>`
      .fixed {
        background-image: url(${props => props.image ? props.image : "../img/default.jpg"})
        z-index: -999!important;
        display: block;
        top: 0;
        left: 0;
      }
    `;

user3618109 4 年前

正在查看您发送的链接。我认为它没有被传递,因为您使用的是一个简单的元素,而且由于image属性不是div元素的已知属性,所以它不会被传递。

上面的部分“通过道具”,“设计任何组件”可能会给你你所需要的。

传递道具如果样式化的目标是一个简单的元素(例如。样式.div),样式化组件通过任何已知的HTML属性传递给DOM。如果它是一个自定义的React组件(例如styled(MyComponent)),则styled组件将通过所有props。

推荐文章

Omphile James · 如何将此CSS代码转换为样式化组件?

2 年前

Taylor Austin · 样式化JSX变量不工作

6 年前

visarts · 无法单元测试覆盖材质ui的样式化组件

6 年前

Roy Prins · 彩色标签的样式化组件

6 年前

Strahinja Ajvaz · 对象解构引发错误

6 年前

Jayce444 · React JSS hover函数值

6 年前

James · 使用已设置样式的组件设置材质UI抽屉组件的样式

6 年前

tony_k · 在样式化组件中共享样式的惯用方法?

6 年前

Elcoosp · 生成样式化组件关键帧的函数是否昂贵?

6 年前

JoeTidee · 如何为React动态创建DOM目标。使用样式化组件创建门户?

6 年前