THIS ANSWER IS FOR NEXT.JS. If you are going to change body’s or html’s etc… css. You should change it on globals.css not Home.modules.css or somewhere else.
Old post but still relevant, so adding an answer to help those with similar issue While not inherently possible in CSS modules alone, the author of the react-toolbox library has actually solved this particular problem very nicely Read their github docs which are more in depth on the subject at https://github.com/react-toolbox/react-toolbox#customizing-components A list of the … Read more
Edit: This answer is definitely outdated for current versions of next.js, check the other answers below. After multiple hours of research I found now finally the right solution and wanted to share it: .babelrc (no magic here) { “presets”: [“next/babel”], “plugins”: [ [ “import”, { “libraryName”: “antd”, “style”: true } ] ] } next.config.js: /* … Read more
From https://github.com/Hacker0x01/react-datepicker/issues/2099#issuecomment-704194903 Try with wrapperClassName property: <DatePicker wrapperClassName=”datePicker” dateFormat=”dd/MM/yyyy” /> CSS: .datePicker { width: 100%; } This way you won’t modify the styles for the whole app styled-components bonus: import React from ‘react’; import styled, { css, createGlobalStyle } from ‘styled-components’; import DatePicker from ‘react-datepicker’; const DatePickerWrapperStyles = createGlobalStyle` .date_picker.full-width { width: 100%; } `; … Read more
This is how you do it with vanilla CSS Modules // vars.css :root { –color-black: #222; } // myComponent.module.css @import ‘./vars.css’; .component { color: var(–color-black); }
Soon after posting, I figured out the solution. The problem, which I thought was quite confusing, was in my Webpack config. Originally my loader looked like: loader: ‘style!css?sourceMap&localIdentName=[local]___[hash:base64:5]!resolve-url!sass?outputStyle=expanded&sourceMap which enabled to me to 1) require my Sass and 2) wrap my styles in :local. However, the css loader was missing the modules option so that … Read more
Using classnames and es6: let classNames = classnames(styles.sideMenu, { [styles.active]: this.props.menuOpen }); Using classnames and es5: var classNames = classnames(styles.sideMenu, this.props.menuOpen ? styles.active : ”);
You do not need to eject. Create React App supports CSS Modules right out of the box as of version 2. Upgrade to the latest (react-scripts@latest) version. If you use yarn: yarn upgrade react-scripts@latest If you use npm: npm install –save react-scripts@latest Then you just have to create a file with the extension .module.css For … Read more
I solved it. I think that I just overdid it in my mind. Instead of writing styles.header.menu I could just write styles.menu, even if it was nested. Example (React + JSX): <div className={styles.header}> <div className={styles.menu}> Whatever </div> </div> .header { .menu { display: block; } }
Now in the year 2021, all you need to do is add a src/Globals.d.ts to your project with these lines: declare module “*.module.css”; declare module “*.module.scss”; // and so on for whatever flavor of css you’re using Then install and add { “compilerOptions”: { “plugins”: [{ “name”: “typescript-plugin-css-modules” }] } } to your tsconfig. Example … Read more