score:1
the newest solution is to upgrade the react-script by using:
npm upgrade --latest react-scripts
it supports the css module so you don't need to config anything. what need to do is add .module to the css file: from './mybutton.css' to './mybutton.module.css'. and change the import as well:
import styles from './mybutton.module.css';
using this, we don't need to perform
npm run eject
any more.
score:5
@tehowner ...phew this question was a doozy. i think i accomplished what you were trying to do.
i created a sandbox that can be found here.
basically, you need this npm module in your project to be able to assign multiple css classes to a react component using the classname
property.
and setup your component with a structure that resembles the below
import react, { component } from 'react';
import { button } from 'reactstrap';
import cssmodules from 'react-css-modules';
import styles from './mydangerbutton.css';
import cn from 'classnames';
class mydangerbutton extends component {
render() {
const myfancydangerbutton = cn({
btn: true,
'btn-danger': true,
mydangerbutton: true
});
return (
<div>
<h1>my fancy danger button!</h1>
<button classname={myfancydangerbutton}>danger button</button>
</div>
);
}
}
export default cssmodules(mydangerbutton, styles);
🍺 cheers chris
Source: stackoverflow.com
Related Query
- React + Reactstrap + CSS Modules + Webpack
- How to import CSS modules with Typescript, React and Webpack
- Use CSS Modules in React components with Typescript built by webpack
- Searching for Webpack config for React Components Library with Typescript, SASS & CSS Modules via SASS support
- css modules & cssnext custom properties in react + webpack
- Error using css modules in typescript react with webpack config
- Inheritence - CSS Modules in React and Webpack
- Configuring CSS modules in development/production with webpack and React
- Webpack scss & css modules react - unexpected token string
- How to use CSS Modules with webpack in React isomorphic app?
- How to apply global styles with CSS modules in a react app?
- Multiple classNames with CSS Modules and React
- Sass with CSS Modules & Webpack
- React Server side rendering of CSS modules
- Remove unused css with React and Webpack
- How to style child components in React with CSS Modules
- using css modules in react how can I pass a className as a prop to a component
- CSS modules not working for react version 16.6.0
- React: Inline CSS modules in JSX with Webpack
- Several CSS files for react CSS modules
- Error while configuring CSS modules with webpack
- Webpack with react modules giving unexpected token
- Switching themes using Less + CSS Modules in React
- Using webpack to load CSS files from node modules
- CSS Code Splitting with Webpack 2 and React Router
- React js SyntaxError Occurs in Node Modules webpack chokidar.js 'return' outside of function (4:2)
- Test with Mocha and Enzyme a React component that uses React CSS Modules
- Use PrimeReact Themes with CSS Modules Enabled in React Application
- Webpack 4 css modules TypeError: Cannot read property 'context' of undefined
- Eslint with react css modules
More Query from same tag
- Does it matter if the function calls in this loop run concurrently? And if so, how do I make each wait until previous is done?
- State array updating on next click
- Why do we need a Single Page Application?
- AG-Grid Column Headers stacked to left
- Function setInterval is not working in reactJs
- Event listener is not removed in useEffect call within function-based component
- Switch animation in Expansion panel not working
- download file in react
- Dispatch redux action after Apollo Query component returns result
- React.js useState Hook takes a while to update the state
- Using jQuery UI with React.js and Webpack
- Test click event on parent component to show children component
- How to fix the clumped up text? How to fix the background not going all the way down?
- Using @material-ui/lab's DataGrid component, how do you access the current active filters?
- Pass props to global context provider from function
- sass:color failing when hardcoded values work fine
- Highlight the clicked page number
- Hide Dropdown based on condtional rendering in reactjs
- Array of dictionaries to a single array of dictionary in javascript
- Event target's name is undefined if not an input
- google material icons loading slowly, flicker from text to icon
- How do I pass a React Context's state through an onClick function created in a method inside that context class?
- Reactjs - how can i make line break in template strings and return for rendering?
- Default value for React Boostrap Option
- How can I add a fade-in animation for Nextjs/Image when it loads?
- Buttons in React changing alignment
- What is "npm run build" in create-react-app?
- bundle.min.js not displaying components in html file
- Can't type in react input field
- Explanation: Get previous state