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

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

我想做的是： 我使用MaterialUI创建了一个“库”，我可以在所有项目中重用它，这样我就不必每次都做我通常做的事情。我已经使用样式化组件对一些重要的ui组件进行了样式化，例如

按钮

和

文本字段

。我已经向使用我的库的应用程序公开了一些修改过的属性。当这些公开的样式是通用样式时，一切都可以正常工作

这里的示例是我修改的

按钮

，仅包含基本样式：

const StyledButton=styled（按钮）`
宽度：${props=>props.width | |“265px”}；
高度：${props=>props.height | |“40px”}；
边距：${props=>props.margin}！重要的；
填充：${props=>props.padding}；
字体大小：${props=>props.fontwweight | |“700”}；
文本装饰：${props=>props.textDecoration}；
`

然后，该按钮用于libaries按钮组件，从而屏蔽其材质ui部分，如下所示：

constmybutton=（道具）=>{
返回（）
}

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

const StyledButton=styled（按钮）`
宽度：${props=>props.width | |“265px”}；
高度：${props=>props.height | |“40px”}；
边距：${props=>props.margin}！重要的；
填充：${props=>props.padding}；
字体大小：${props=>props.fontwweight | |“700”}；
文本装饰：${props=>props.textDecoration}；
@仅媒体屏幕和（最大宽度：${MOBILE_BREAKPOINT}）{
宽度：${props=>props.mWidth | |“165px”}；
高度：${props=>props.mHeight | |“40px”}；
边距：${props=>props.mMargin}；
填充：${props=>props.mPadding}；
字体重量：${props=>props.mFontWeight}；
文本装饰：${props=>props.mTextDecoration}；
}
`;

然而，当我现在试图设置这些值时，我在控制台中从React（如预期的那样）得到错误，这些错误不会妨碍代码的执行。但当我将屏幕宽度降低到450px（移动断点）以下时，仍然没有发生任何事情

我试图这样做的方式是通过解构props

js const{mWidth，mHeight}=mobile

这些值显示在组件的道具中，但未使用。我这样通过他们：

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

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

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

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

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};
    }
`;

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

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

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

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

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

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};
    }
`;

react组件中的afaik样式在html中内联，并且afaik您不能在html元素中的内联样式上有断点。如果我是您，我将从一个确实有效的示例中查看一些生成的html，并查看这些样式是否最终内联到html中。如果他们这样做了，那么至少这告诉你问题可能就在那里。@TKoL这些样式确实是在生成的html中内联的。但他们仍然被忽视。然而，当我在模块中执行相同的操作时，事情会像通常一样工作。设计一个已经设计好的组件在消费应用程序中添加移动功能也没有效果，谢谢！尽管我以为我是这样做的，但不知怎么的，它现在起作用了。所以内部有一些问题。祝你有美好的一天