npmreactjs95% confidence\u2191 110

Warning: Prop `className` did not match. when using styled components with semantic-ui-react

Full error message

I use this code to margin my Button from top:

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

and whenever i use MarginButton node, I get this error: Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

You can see this produced here.

What should I do?

Solutionsource: stackoverflow \u2197

Or you could just add this to your next.config.js. This also makes it so next-swc (speedy web compiler) works to reduce build times. See more here. // next.config.js module.exports = { compiler: { // Enables the styled-components SWC transform styledComponents: true } }

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/b445cf85ca83daea258b0fadb975c4e726558d2f2b6268bf658542617de1049e

hash \u00b7 b445cf85ca83daea258b0fadb975c4e726558d2f2b6268bf658542617de1049e