Question

我在我的TypeScript代码中使用了Link中的@material-ui/core/Link，它工作得很好：

<Link href="#" variant="body2">
  Forgot?
</Link>

但是，我试图切换到另一个文件中的styled-components。现在，我正在尝试使用它（例如：https://styled-components.com/docs/basics）：

const Link = ({ className, children}) => (
  <a className={className}>
    {children}
  </a>
);

export const StyledLink = styled(Link)`
  href: #;
  variant: body2;
`;

以及：

<StyledLink>Forgot?</StyledLink>

但是我在className和children上经常遇到Binding element 'children' implicitly has an 'any' type.ts(7031的错误，但是即使我添加了any，它也不起作用。

在这种情况下，使用样式化组件的正确方法是什么？还是其他任何css-in-js替代方案？

Answer 1

您应该像下面这样制作CarClient.Verify(uow => uow.AddTank(It.IsAny<ClientTank>()),Times.Once);组件：

Link

Answer 2

例如，您可以在其他div或按钮上方使用<Link>

<Link><button className="Btn">Forgot?</button></Link>

然后您可以做两件事来设置按钮/ div的样式

<Link><button className="Btn" style={{backgroundColor: 'red'}}>Forgot?</button></Link>

或者第二个是导入单独的CSS文件

import classes from './ComponentName.module.css'

然后给出样式

<Link><button className={classes.Btn}>Forgot?</button></Link>

Answer 3

此代码有效，并且没有来自打字稿编译器的警告

xor eax, eax           ; eax = 0x00000000 (Gap 1)
mov eax, 0x12345678    ; eax = 0x12345678 (Gap 2)
mov ebx, 0
mov bx, ax             ; ebx = 0x00005678 (Gap 3)
mov bl, ah             ; ebx = 0x00005656 (Gap 4)
mov eax, 0xFFFFFFFF   
sar eax, 8             ; eax = 0xFFFFFFFF (Gap 5)
shr eax, 8             ; eax = 0x00000000 (Gap 6)
sar eax, 8             ; eax = 0x00000000 (Gap 7)
ror eax, 8             ; eax = 0x00000000 (Gap 8)

如何使用样式组件对<Link>进行样式设置

3 个答案: