{"id":407,"hash":"b445cf85ca83daea258b0fadb975c4e726558d2f2b6268bf658542617de1049e","pattern":"Warning: Prop `className` did not match. when using styled components with semantic-ui-react","full_message":"I use this code to margin my Button from top:\n\nconst makeTopMargin = (elem) => {\n    return styled(elem)`\n        && {\n            margin-top: 1em !important;\n        }\n    `;\n}\n\nconst MarginButton = makeTopMargin(Button);\n\nand 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\"\n\nYou can see this produced here.\n\nWhat should I do?","ecosystem":"npm","package_name":"reactjs","package_version":null,"solution":"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.\n\n// next.config.js\nmodule.exports = {\n  compiler: {\n    // Enables the styled-components SWC transform\n    styledComponents: true\n  }\n}","confidence":0.95,"source":"stackoverflow","source_url":"https://stackoverflow.com/questions/51791163/warning-prop-classname-did-not-match-when-using-styled-components-with-seman","votes":110,"created_at":"2026-04-19T04:51:06.839718+00:00","updated_at":"2026-04-19T04:51:06.839718+00:00"}