使用.ATTR与类型inteface的样式组件

发布于 2025-01-30 02:27:55 字数 623 浏览 0 评论 0原文

我正在使用项目中的样式组件，并且想在共享的表单样式文件中分开一些样式，但是当我尝试设置.ATTR（）函数的动态属性时，我找不到一种方法来设置设置”的方法。价值“动态。我有以下代码

type submitButtonProps = {
    customText: string
}


export const SubmitButton = styled.input.attrs<submitButtonProps>({
    type: "submit",
    value: ${customText},
})`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;

任何帮助/指示器将不胜感激

原文

I am using styled components in my project and I want to seperate some styles out in a shared form styles file, however when I try to set the dynamic properties of the .attr() function I cannot find a way that works to set the "Value" dynamically. I have the following code

type submitButtonProps = {
    customText: string
}


export const SubmitButton = styled.input.attrs<submitButtonProps>({
    type: "submit",
    value: ${customText},
})`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;

Any help/pointers would be greatly appreciated

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

飞烟轻若梦 2025-02-06 02:27:55

我能够使用以下语法来解决它：

interface submitButtonProps {
    customText: string;
}

export const SubmitButton = styled.input.attrs<submitButtonProps>(({ customText }) => ({
    type: "submit",
    value: customText,
}))<submitButtonProps>`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;

I was able to solve it using the syntax below:

interface submitButtonProps {
    customText: string;
}

export const SubmitButton = styled.input.attrs<submitButtonProps>(({ customText }) => ({
    type: "submit",
    value: customText,
}))<submitButtonProps>`
    padding: 4px 64px;
    background-color: ${(p) => p.theme.primaryColor};
    color: white;
    outline: none;
    border: none;
    font-size: 14px;
    margin-top: 16px;

    &:disabled {
        border: 1px solid #999999;
        background-color: #cccccc;
        color: #666666;
    }
`;

回复收藏 0 原文

~没有更多了~