React - changing default properties

  • Thread starter Thread starter mathmari
  • Start date Start date
  • Tags Tags
    Properties
AI Thread Summary
To change the width of a Material UI sidebar in React, it's essential to customize the component settings rather than relying on inline CSS. The recommended approach is to refer to the Material UI documentation for the Drawer component, which provides guidance on adjusting properties like width directly in the JSX. Using a global CSS file can help manage styles more efficiently, but dynamic styles created by React may complicate this. If the sidebar overlaps the main content, this is typical behavior for a temporary drawer; alternatives like permanent or persistent drawers are available. Caching issues may also affect deployment visibility, so refreshing the browser or waiting can resolve this.
mathmari
Gold Member
MHB
Messages
4,984
Reaction score
7
Hey! :smile:

We have a sidebar menu and at browser I clicked Inspect and we have :

.css-1rzb54h .MuiDrawer-paper {

  1. width:
    260px
    ;
  2. background: rgb(255, 255, 255);
  3. color: rgb(97, 97, 97);
  4. border-right: none;
}

I want to change the width. So I have to customize the given width of Material UI, right?
For that do I have to add a css file with the following?

CSS: 
<Drawer defaultValue={260} sx={{ width: 500, color: 'success.main', '& .MuiDrawer-paper': { borderRadius: '1px', }, }} />

If that is correct, do we have to import that to the other .js files?

🤔
 
Technology news on Phys.org
Hey @mathmari !

What you have is html with inline css in a javascript file.
Does it work? 🤔

Instead of duplicating inline css in many files, the usual approach is to have a central CSS file that determines the layout globally. It also removes distracting layout directives from the code.

In "normal" html that means that we have something like <link rel="stylesheet" href="myproject.css" /> in the <head> section.
The myproject.css file should then contain something like Drawer { width: 500px; }.
At present I do not know how React facilitates global CSS settings though. 🤔
 
  • Like
Likes mathmari
I like Serena said:
At present I do not know how React facilitates global CSS settings though. 🤔
React is based on components which often have options for things like width of boxes, you won't find this in the global CSS (the fact that you see the CSS selector .css-1rzb54h indicates that this CSS is created dynamically by the React runtime and scoped to the instance of the component).

mathmari said:
We have a sidebar menu and at browser I clicked Inspect and we have :
Inspecting an element is not generally going to help you because styles are created dynamically.

I like Serena said:
I want to change the width. So I have to customize the given width of Material UI, right?
No, you need to read the documentation for the component you are using, in this case https://mui.com/material-ui/react-drawer/

If you click on one of the "edit in code sandbox" links on that page you will get something you can play with and you can see where the width is set.

Although it is repeating myself, I will say again that the way to make progress in modern front-end coding is to read the manual for the relevant componenents: do NOT ask here or anywhere else for somebody else to do that for you. Forums are to ask for help when you don't understand something, not for when you simply haven't looked it up.
 
  • Like
Likes mathmari and PeterDonis
I have read in the documentation and I have searched also in Google and I found that the below part of css code works to change the width, but I want to understand the code.

CSS: 
.MuiDrawer-paper {
    width: 60% !important;
}
    
@media (max-width: 1200px) {
    .MuiDrawer-paper {
        width: 100% !important;
    }
}

I haven't really understood what the secons part does. Could you explain that to me? 🤔
 
mathmari said:
I have read in the documentation and I have searched also in Google and I found that the below part of css code works to change the width, but I want to understand the code.

I haven't really understood what the secons part does. Could you explain that to me? 🤔
:smile: much better, this is exactly how to learn things and I am delighted to help!

Firstly though, the "React" way to do it is to change the 250 in the code below (see https://mui.com/material-ui/react-drawer/#temporary-drawer and click on "show the full source").
HTML: 
    <Box
        sx={{ width: anchor === 'top' || anchor === 'bottom' ? 'auto' : 250 }}
        role="presentation"
        ...

The way you have done it is a hack, but I will explain how it works below.

CSS: 
/* This selects ALL the Drawer components on the site, all the time... */
.MuiDrawer-paper {
    /* ...and changes their width to 60% of the screen.  The !important
       makes sure this overrides any other settings (unless they also have
       !important and come later). */
    width: 60% !important;
}
 
/* This means the following rules only apply when the browser window is
    no more than 1200px wide. */
@media (max-width: 1200px) {
    /* This selects ALL the Drawer components on the site (but only when the
        browser window is no more than 1200px wide)... */
    .MuiDrawer-paper {
    /* ...and changes their width to 100% of the screen.  The !important
       makes sure this overrides any other settings (unless they also have
       !important and come later), in particular the 60% setting above. */
        width: 100% !important;
    }
}
 
I got stuck right now. When we change the width in the way I did, we have to change also the size of the main box, or not? Because when we change only the width of the sobar it will overwrite the main page, or not? 🤔
 
mathmari said:
I got stuck right now. When we change the width in the way I did, we have to change also the size of the main box, or not?

I wouldn't have thought so, although as I say this is a bit of a hack so anything can happen.

mathmari said:
Because when we change only the width of the sobar it will overwrite the main page, or not? 🤔

Unless you have done something very strange the .MuiDrawer-paper selector will not apply to the main page element.
 
pbuk said:
Unless you have done something very strange the .MuiDrawer-paper selector will not apply to the main page element.

At the moment I think the sidebar overlaps the main page. So have I done something wrong or is that normal? 🤔

Also I commited and deployed it but it doesn;t show the differences, but locally it does. What does that mean? Must there be an error? 🤔
 
mathmari said:
At the moment I think the sidebar overlaps the main page. So have I done something wrong or is that normal? 🤔
That is the default behaviour for a temporary drawer. Look at the other options at https://mui.com/material-ui/react-drawer/, particularly "permananent" or "persistent".

mathmari said:
Also I commited and deployed it but it doesn;t show the differences, but locally it does. What does that mean? Must there be an error? 🤔
Likely it is caching somewhere in the path. Wait a few minutes and/or hold down shift and click refresh in the browser.
 
  • Like
Likes mathmari
  • #10
pbuk said:
Likely it is caching somewhere in the path. Wait a few minutes and/or hold down shift and click refresh in the browser.

When I give the command : "git add ." then I get many lines with messages like :

warning: LF will be replaced by CRLF in .eslintrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .gitignore.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in .prettierrc.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in README.md.
The file will have its original line endings in your working directory
warning: LF will be replaced by CRLF in jsconfig.json.
What does this mean? Does this maybe cause the problem? 🤔
 
  • #11
I tried it again and now it seems to work! I really don't know what was wrong.
 
  • #12
mathmari said:
When I give the command : "git add ." then I get many lines with messages like :
...
What does this mean? Does this maybe cause the problem? 🤔

Unlikely, however it is not ideal. It is caused by Windows using two characters to end a line in a text file (a "CR" character and a "LF" character) whereas Posix text files (which is the standard Linux uses) just have one "LF".

Many people use a code editor (in 2022 this is usually the excellent, free and cross-platform Visual Studio Code) with settings to use the single "LF" standard and using the following setting to stop git messing with line endings:
Bash: 
git config --global core.autocrlf false
but changing this in the middle of a project is messy, and other solutions exist: this is probably not the time to worry.

mathmari said:
I tried it again and now it seems to work! I really don't know what was wrong.
Probably caching. How are you deploying this: Netlify? Github pages?
 

Similar threads

Dropdown menu - How to show the content of each option
Replies
23
Views
2K
Construction Short Dividing fence on my property: what are my options?
Replies
16
Views
3K

Hot Threads

Recent Insights

Back
Top