Differences between Next.js and React app using styled components

Question

I am migrating my app from SPA React to Next.js

I have found this weird bug wherein the SPA I have max-width: 100% while in Next.js width: fit-content

I cannot understand where the different behavior is coming from, I know I can fix it easily but I would like to understand the causes.

code is

const RadioButtonWrapper = styled.div`
  color: ${({ theme, dark }) => theme.global.colors[dark ? 'white' : 'black']};
  svg {
    transform: scale(1.5);
    fill: ${({ theme, dark }) => theme.global.colors[dark ? 'white' : 'black']};
  }
  [class^="StyledRadioButton__StyledRadioButtonContainer"] {
    margin-bottom: 6px;
  }
  [class^="StyledBox__StyledBoxGap"] {
    height: 0;
  }
  [class^="StyledRadioButton__StyledRadioButtonBox"] {
    height: 18px;
    width: 18px;
    transition: opacity 200ms ease-in-out;
    border-width: 1px;
    border-color: ${({ theme, dark }) => theme.global.colors[dark ? 'white' : 'black']};
    margin-bottom: 1px;
  }
  &:hover {
    [class^="StyledRadioButton__StyledRadioButtonBox"] {
      border-color: ${({ theme, dark }) => theme.global.colors[dark ? 'white' : 'black']} !important;
    }
  }
  label {
    [class^="StyledRadioButton"] {
      flex-shrink: 0;
    }
  }

  ${({ rightAlign }) => rightAlign
    && `  label {
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;
      }`}
`;

const RadioButtonGroup = ({ dark, rightAlign, ...props }) => (
  <RadioButtonWrapper dark={dark} rightAlign={rightAlign}>
    <GrommetRadioButtonGroup {...props} />
  </RadioButtonWrapper>
);

SPA

Next.js

Linda Paiste · Accepted Answer · 2021-06-26 21:13:11Z

1

The difference has to do with what sort of polyfills the two compilers are using to make sure that your code can run in most browsers.

Check out the Browser Compatibility for the two properties. max-width has been part of the CSS spec for a very long time and is supported by every browser. Whereas fit-content is not supported at all in Internet Explorer and needs a prefix for Firefox.

The “max-width: 100%” version is more versatile, so your SPA ships that version.

Next.JS has more advanced polyfill techniques. They only ship the backwards compatible version to older browsers which need it. When you run your code in a modern browser you see “width: fit-content”. If you were to run the code in IE you would see “max-width: 100%” instead.

answered Jun 26, 2021 at 21:13

Linda Paiste

42.6k8 gold badges81 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Differences between Next.js and React app using styled components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related