道具输入的Reactjs最大宽度使用样式化组件

如何解决道具输入的Reactjs最大宽度使用样式化组件

我有一个使用样式化组件样式化的输入（antd）。问题是我无法使用props更新最大宽度。这是代码

 const TextInput = styled(Input)`
  border: 2px solid #edf4ff;
  border-radius: 15px;
  width: ${(props) => props.width};
  max-width: ${(props) => props.maxWidth};
  min-width: ${(props) => props.minWidth};
  height: 64px;
  background-color: ${(props) => props.backgroundColor};
  &:active,&:focus,&:-internal-autofill-selected {
    background-color: white !important;
    margin-left: 17px;
  }
`;

解决方法

您需要将maxWidth作为道具传递给样式为TextInput的

<TextInput maxWidth={'500px'}>ABC</TextInput>