Using Styled Components within a NPM Module

Question

I am unsure if this is a me issue or the libary or just not possible in general (although it should).

What I am trying to do is the following: I have used Material UI to create a "Libary" that I can reuse in all my projects so I do not have to do all the things every time that I usually do. I have used styled components to style some of the material ui components such as Button and TextField. I have exposed some of those modified properties to the app that consumes my libary. When these styles that are exposed are generic everything works fine.

As an example here is my modified Button with just basic styles:

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

This button then is used in the libaries Button component thus masking the material ui part of it like so:

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

And so forth. This is working. My issue arrises when I am trying to make the button change on some mobile breakpoint. This is my full button component here:

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

However when I am trying to now set these values I get errors in the console from React (as expected) that are not hindering the execution of my code. But still nothing is happening when I decrease screen width below 450px (MOBILE_BREAKPOINT).

The way I am trying to do it is by deconstructing the props js const {mWidth, mHeight} = mobile;

The values show up in the props of the component but they are not used. I am passing them like this:

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

It just does not do what I want it to when the breakpoint is passed. The width stays at 75%. 95% is never activated. Can anyone tell me what I am doing wrong or if this is impossible to achieve?

I appreaciate the help!

afaik styles in react components go inline in the html, and afaik you cannot have breakpoints on inline styles in html elements. — TKoL
If I were you, I would look at some of the generated HTML from an example that does work, and see if the styles end up inlined into the html. If they do, then at least that tells you the problem likely lies there. — TKoL
@TKoL the styles are indeed inline in the genereated html. Still they are being ignored. However when I do the same within the module, things work as they usually would. Styling one of the already styled components to add the mobile capabilities in the consuming app also has no effect — Timbo

marzzy marzzy · Accepted Answer · 2020-09-14T09:08:21

You can simply write your MyButton code like this:

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

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

And then your media query worked fine.

I recommend you to set default value in destructuring part in the MyButton instead of in the StyledButton, in order to do that you can change MyButton component like this:

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

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

and then StyledButton should change like this:

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

and you also can refactor StyledButton like below:

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

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

Using Styled Components within a NPM Module

1 Answers