score:2
Accepted answer
you need to export a theme, that you created from styleoverride.js
, not a createtheme
function, provided by material-ui
. then you import theme
in your other component, and pass as a prop to a <themeprovider theme={theme}></themeprovider>
.
check out the docs for more detailed explanation.
// styleoverride.js
import { createtheme } from "@material-ui/core/styles";
const theme = createtheme({
overrides: {
muicard: {
root: {
overflow: "visible",
boxshadow: "none",
},
},
muibutton: {
root: {
backgroundcolor: "#673ab7",
color: "#fff !important",
marginright: "10px",
padding: "5px !important",
"&:hover": {
backgroundcolor: "#b39ddb !important",
},
},
label: {
fontsize: "11px",
},
},
muitablehead: {
root: {
fontweight: "800",
},
},
muitablecell: {
root: {
padding: "15px !important",
},
},
muitoolbar: {
root: {
padding: "0px !important",
// margintop:"15px"
},
},
muisvgicon: {
root: {
fontsize: "15px !important",
},
},
rabulkactionstoolbar: {
title: {
marginleft: "15px",
},
},
},
});
export default theme;
// list.js
import theme from "./styleoverride";
export const rolelist = (props) => {
return (
<themeprovider theme={theme}>
<card >
<list {...props} pagination={null} perpage={9999}>
<datagrid>
<textfield source="name" />
<editbutton />
</datagrid>
</list>
</card>
</themeprovider>
);
};
export const rolecreate = (props) => {
return (
<themeprovider theme={theme}>
<card>
<create {...props}>
<simpleform>
<textinput source="name" />
</simpleform>
</create>
</card>
</themeprovider>
);
};
Source: stackoverflow.com
Related Query
- How to override css and import with another component in react js
- How to import CSS modules with Typescript, React and Webpack
- How to test if a React component contains another component with Tape and Enzyme?
- How to apply a CSS style in React based on condition and incorporate it with another class?
- For a component in React with Reux, how to not fire mouse event in one case and how to fire mouse event in another case
- How to extract props and states from one sibling component to another with react hooks?
- How to import a CSS file in a React Component
- How to mock React component methods with jest and enzyme
- How to apply CSS and Styling to a React component
- How to override the width of a TextField component with react MUI?
- React & Jest, how to test changing state and checking for another component
- How to test a component with a nested container with React and Redux?
- How to test whether a React Component contains another component with jest?
- How to use vw and vh css with React Native
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
- how to import HTML file into React component and use it as a component?
- How to replace a component with another one upon event (button click) in react js
- How do you correctly use React.lazy() in Typescript to import a react component with a generic type parameter?
- How to read console.log from a mounted component with Enzyme and Jest in Create React App
- How to mock a React component lifecycle method with Jest and Enzyme?
- How to design a ReactJS component that listens to a WebSocket and interacts with CSS animation
- Test with Mocha and Enzyme a React component that uses React CSS Modules
- How can I pass CSS classes to React children and ensure they will override the child’s local class?
- How to import from React-Select CDN with React and Babel?
- How to conditionally apply styles in a react component with CSS Modules?
- how to change image src using props with styled component and react
- How to import a css file in a react component as raw text?
- How to test with jest and typescript with types a basic react function component
- How to test a React component that has Router, Redux and two HOCs... with Jest and Enzyme?
- How to re-render a particular component in React with setInterval or there is another way?
More Query from same tag
- Getting react-hooks/exhaustive-deps error while trying to deploy a react app
- How to show a button after 10 seconds using react hooks
- How can I return back to the page after I click yes in a modal?
- Displaying Firebase data as array in Javascript/HTML
- How to render an array of elements whose attributes are in a nested array of objects?
- react-google-maps click the map to get coordinates
- What's the difference between hydrate() and render() in React 16?
- Is there any solution to fix this Cors error?
- how to display a tree data structure in react.js
- big size of svg not working proper how to set big svg in react-pan-zoon-svg?
- Cannot access object data in Gatsby page query
- Tpyography breaks into second line in toolbar with grid
- React and Grunt - Envify NODE_ENV='production' and UglifyJS
- Image is not shown in nested curly braces in react js functional component
- Local image show not show up in React JS
- update setState with string of the key
- Redirect to index.html file in react onclick
- Accessing Axios error codes in interceptor
- json-server returning html instead of JSON
- Can you, or should you use localStorage in Redux's initial state?
- In react-native we use styleSheet.create. What do we use in reactjs?
- Overlap Left Part Input using Styled Components in React
- React JS audio does not play
- How do I fix my error whilst styling react with MUI?
- Redux: Can't figure out why ownProps gets out of sync with state
- React element is incorrectly reporting width of the window
- ReactJS - Hide part of page under authorization
- Remove data in React Firebase application
- How can I make this dropdown show all of the fifty states instead of "option #"
- Array.push pushes the content multiple times