score:2
Accepted answer
"createmuitheme" function accepts object with limited set of keys.(palette, typography, spacing...etc)
you can use just normal object.
const theme = {
shadowing: {
boxshadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
};
score:8
in my case i had to use both createmuitheme and custom variables. to achieve it i did as follows.
first i created a theme with createmuitheme
const theme = createmuitheme({
typography: {
fontfamily: "verdana",
},
});
then i created a separated object where i add my variables:
const cssvariables = {
shadowing: {
boxshadow: "0 2px 5px -1px rgba(0, 0, 0, 0.3)",
}
};
then i pass the two objects to my themeprovider:
<themeprovider theme={{ ...theme, ...cssvariables }}>
and finally, to access the variable:
const usestyles = makestyles(theme => ({
workimage: {
boxshadow: theme.shadowing.boxshadow,
},
}));
Source: stackoverflow.com
Related Query
- Material UI global css variables
- Material UI - Multiple css classes on global theme
- How to create and use global css variables in jss
- React-Admin - adding material ui theme overrides specific css selector as a global
- How to apply global styles with CSS modules in a react app?
- How to define css variables in style attribute in React and typescript
- Next.js Global CSS cannot be imported from files other than your Custom <App>
- Next.JS: Using SASS variables from global scss
- Global scss variables in react-create-app
- How to use global variables in CSS-Modules?
- How to declare global variables in React JS
- Material UI v5 server side rendering css order not working with gatsby
- Migrating to Styled-Components with global SASS variables in React
- How to use a global parent selector with CSS Modules
- How can I use CSS @media for responsive with makeStyles on Reactjs Material UI?
- Should global css be put in each component or the root component (webpack entry file)?
- Storybook Global Scss variables
- Using css modules how do I define a global class
- Using global variables in Redux App
- Is it possible to use CSS Grid in place of Material UI's grid component?
- Using SCSS variables in CSS Modules
- react-pagination styling in global css not working
- Material UI: Change theme color by SASS variables
- how to use css in JS for nested hover styles, Material UI
- Warning: Prop `className` did not match ~ Material UI css arbitrarily breaks on reload
- In material ui using makeStyles, is it possible to write a css rule that applies only if the element has both classes?
- How to extend(inherit) a global CSS class from within a styled-components
- Importing CSS variables into a Typescript file
- Only use the CSS of Material UI React Components
- Accessing global variables in Sass with Webpack without multiple imports
More Query from same tag
- Accessing LaunchDarkly flags from React.JS
- How to enable hot reloading via shared folders with Vagrant VM?
- How to I wrap a useState variable in a if statment, but still have it's value be available outside the if reactjs
- How to write a Jest-enzyme test case for code in React useEffect whose dependencies are updated in its child component
- How to open one dropdown item?
- Load state/data before render?
- How would you implement pinch-zoom in react-native?
- Graphing Dataset with recharts with continous line or area graph for average of 15 minute intervals javascript
- How to change style in material-ui table pagination
- Calling a function a nested state object in ReactJS
- Building Twitter Like Dialogbox for input
- Changing the color of a textarea in a separate file
- React.js history.push in a separate function?
- Make a GET-request to an endpoint API and use data
- React Virtualized MultiGrid component skips first row in data set
- React import a module with a declared namespace
- How to prevent non-deterministic state updation in Redux?
- Linking functions with Promises in React
- Export data and Fixed Data Table
- button for add and remove component in react
- React: Setting state with array of objects
- React Grid System equivalent to Bootstrap's Grid system?
- Material UI Dark Mode
- add tooltip to span tag with certain class on mousehover
- Conditional inline style in react js
- How to redirect to another page using history on React js?
- Socket.io - React: How to display the users connected in a room?
- how to display the title in the middle of a donut chart with legend?(react-highcharts)
- React onClick not executing parent method
- Javascript / React window.onerror fired twice