score:0
there is documentation written under the drawer tab.
there is another way to do that is to overwrite the original class by inspecting that element, or create an above your drawer, and change the color as a child.
score:0
i forked your example and apply the changes from the question that i suggested you via comments before and here you have your code working with a red background for the drawer.
changes i introduced to make it work were all in the header.js file:
- added new style named paper to the makestyles invocation at line 17
- changed
const { header, menubutton, toolbar, drawercontainer } = usestyles();
byconst { paper, header, menubutton, toolbar, drawercontainer } = usestyles();
- added classes={{ paper }} to the drawer instance
a few extra things you could improve:
you do not need destructuring when you use a component:
<drawer
classes={{ paper }}
{...{
anchor: "left",
open: draweropen,
onclose: handledrawerclose
}}
>
<div classname={drawercontainer}>{getdrawerchoices()}</div>
</drawer>
is usually written like this:
<drawer
classes={{ paper }}
anchor="left"
open={draweropen}
onclose={handledrawerclose}
>
<div classname={drawercontainer}>{getdrawerchoices()}</div>
</drawer>
instead of:
return (
<header>
<appbar classname={header}>
{mobileview ? displaymobile() : displaydesktop()}
</appbar>
</header>
);
you should do:
return (
<appbar classname={header}>
{mobileview ? displaymobile() : displaydesktop()}
</appbar>
);
Source: stackoverflow.com
Related Query
- Changing the Color of the Drawer in Material-UI React
- How do you change the Stepper color on React Material UI?
- Changing the color of Office UI Fabric React components
- How to set the background color of material ui drawer component with styled-components?
- Changing the color of the Inactive Tab Color in Material UI
- Change the MobileStepper color on React Material UI
- changing the color of the underline or space between the title and body of popover bootstrap in react
- Changing the label of required in text-field with react and material ui
- How do I set the text color of primary raised buttons for React Material UI?
- How to change the color of the placeholder in material UI React js
- I want to change the color of button in react using material ui
- changing the color of card in material ui conditionally?
- how to set the border color to Card component in React material ui
- How to change the progress bar background color dynamically in react material ui?
- React material ui responsive drawer - I want to remove the padding from the Toolbar
- The optimum way of changing Material UI react theme at runtime
- Changing the background color of my React app based on if another component is in the DOM
- Figuring out how to mock the window size changing for a react component test
- How to make the whole Card component clickable in Material UI using React JS?
- Material-UI changing the color of inputs floating label
- how to make material data grid width to fill the parent component in react js
- React Material UI: How to give a button a custom color when disabled?
- Divider color change React Material Ui
- How to change the text color of the selected row in material ui table
- How to change outline color of Material UI React input component?
- How can I change the color of a Link in React with Material-UI?
- React - Changing the state without using setState: Must avoid it?
- How to change the primary color of the react built-in bootstrap?
- How to modify the default value of a Material UI prop-function in React JS?
- changing the dark mode color in chakra ui
More Query from same tag
- this.state.json.map is not a function
- Can we perform expressions within the curly braces where we pass props value in react
- Can't do module augmentation with typescript
- uploading files with multer after user is authenticated
- How to Toggle Multiple Hide/Display state
- Webpack + React: Passing arbitrary key-value configuration data into JSX
- Uncaught (in promise)
- How To Update Structure of Redux State Persisted In LocalStorage
- nth-of-type, first-child does not work properly
- can't import dynamic value inside curly braces - Zero to Mastery React
- How to add a className to the first item on load?
- Detect click outside react parent component
- Passing a variable to `renderMenuItemChildren` in react typeahead bootstrap
- React tutorial - css not loading
- Connected Component testing with certain prop (React/Redux)
- In React, how to pass an element as a Prop and Render without wrapping an element around it?
- How do I add a logout in React on Rails in a Hamburger menu, I'm a student, by the way
- The variable this.state.plans is undefined after updating
- How to update nested array in React state?
- When I format two different times they both come out as the same time, is there a way to fix this?
- How to pass mock event to the react element that React.cloneElement() method returned
- How to import js file to React component?
- How to seperate the two functions in ReactJS?
- React-Router not rendering some components
- React.JS prop is not found
- null reference exception while passing event handler in react
- Can we pass null as first value in useRef, React JS?
- Loading three.js texture in react as base64 string
- how to check type of input field in react?
- how to add onchange event in react js application