在 NPM 模块中使用样式化组件

Question

我不确定这是我的问题还是图书馆的问题，或者一般来说不可能（尽管它应该）。

我想要做的是以下几点： 我使用 Material UI 创建了一个“库”，我可以在所有项目中重复使用它，这样我就不必每次都像往常一样做所有事情。我已经使用样式化组件来设置一些材质 ui 组件的样式，例如 Button 和 TextField。我已经向使用我的库的应用程序公开了一些修改后的属性。当这些公开的样式是通用的时，一切正常。

作为一个例子，这里是我修改的Button，只有基本样式：

const StyledButton = styled(Button)`
    width: ${props => props.width || "265px"};
    height: ${props => props.height || "40px"};
    margin: ${props => props.margin} !important;
    padding: ${props => props.padding};
    font-weight: ${props => props.fontWeight || "700"};
    text-decoration: ${props => props.textDecoration};
`

然后这个按钮被用在 libaries Button 组件中，从而像这样掩盖了它的材质 ui 部分：

const MyButton = (props) => {
    return (<StyledButton width={props.width} height={props.height} .../>)
}

等等。这是有效的。当我尝试在某些移动断点上更改按钮时，我的问题出现了。 这是我的完整按钮组件：

const StyledButton = styled(Button)`
    width: ${props => props.width || "265px"};
    height: ${props => props.height || "40px"};
    margin: ${props => props.margin} !important;
    padding: ${props => props.padding};
    font-weight: ${props => props.fontWeight || "700"};
    text-decoration: ${props => props.textDecoration};

    @media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
      width: ${props => props.mWidth || "165px"};
      height: ${props => props.mHeight || "40px"};
      margin: ${props => props.mMargin};
      padding: ${props => props.mPadding};
      font-weight: ${props => props.mFontWeight};
      text-decoration: ${props => props.mTextDecoration};
    }
`;

但是，当我现在尝试设置这些值时，我在控制台中收到来自 React 的错误（如预期的那样），这些错误不会妨碍我的代码的执行。但是当我将屏幕宽度减小到 450 像素以下 (MOBILE_BREAKPOINT) 时仍然没有发生任何事情。

我尝试这样做的方式是解构道具js const {mWidth, mHeight} = mobile;

这些值显示在组件的 props 中，但未使用。我像这样传递它们：

<MyButton width={"75%"} height={"40px"} mobile={{mWidth: "95%}}/>

当断点通过时，它只是不做我想做的事。宽度保持在 75%。 95% 从未激活。 谁能告诉我我做错了什么或者这是不可能实现的？

感谢您的帮助！

Answer 1

您可以像这样简单地编写您的 MyButton 代码：

const MyButton = (props) => {
    const { width, height, mobile: {mWidth, mHeight}} = props;

    return (
      <StyledButton
         width={width}
         height={height}
         mWidth={mWidth}
         mHeight={mHeight}
      />
    );
}

然后您的媒体查询工作正常。

我建议您在 MyButton 而不是 StyledButton 中的解构部分中设置默认值，为此您可以像这样更改 MyButton 组件：

const MyButton = (props) => {
    const {
      width = "265px",
      height = "40px",
      mobile: {mWidth = "165px", mHeight = "40px"}
    } = props;

    return (
      <StyledButton
         width={width}
         height={height}
         mWidth={mWidth}
         mHeight={mHeight}
      />
    );
}

然后 StyledButton 应该像这样改变：

const StyledButton = styled(Button)`
    width: ${props => props.width};
    height: ${props => props.height};

    @media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
      width: ${props => props.mWidth};
      height: ${props => props.mHeight};
    }
`;

你也可以像下面这样重构 StyledButton：

const StyledButton = styled(Button)`
    width: ${({ width }) => width};
    height: ${({ height }) => height};

    @media only screen and (max-width: ${MOBILE_BREAKPOINT}) {
      width: ${({ mWidth })=> mWidth};
      height: ${({ mHeight })=> mHeight};
    }
`;