React - changing default properties

  • Thread starter Thread starter mathmari
  • Start date Start date
  • Tags Tags
    Properties
Click For Summary

Discussion Overview

The discussion revolves around customizing the width of a sidebar menu using Material UI in a React application. Participants explore various methods for applying CSS styles, the implications of using inline styles versus global CSS, and the behavior of the sidebar in relation to the main content area.

Discussion Character

  • Technical explanation
  • Conceptual clarification
  • Debate/contested
  • Meta-discussion

Main Points Raised

  • One participant inquires about changing the default width of a Material UI Drawer component and whether a separate CSS file is necessary.
  • Another participant suggests that using a central CSS file is a common practice to avoid inline styles, although they express uncertainty about how React manages global CSS.
  • It is noted that styles in React can be dynamically generated, and inspecting elements may not provide useful insights for static CSS.
  • A participant shares a CSS snippet that successfully changes the width of the Drawer component but seeks clarification on the media query's function.
  • Concerns are raised about whether changing the sidebar width necessitates adjustments to the main content area, with one participant suggesting that it might not be necessary.
  • Another participant mentions that the sidebar's default behavior may cause it to overlap with the main page, questioning if this is expected.
  • There are discussions about deployment issues, including caching problems that may prevent changes from appearing live.
  • Warnings about line endings in Git are discussed, with one participant expressing concern that this might be related to their deployment issues.

Areas of Agreement / Disagreement

Participants express differing views on the best approach to styling in React, with some advocating for global CSS while others highlight the component-based nature of React. The discussion about whether changing the sidebar width affects the main content area remains unresolved, as does the issue of deployment discrepancies.

Contextual Notes

Participants reference specific documentation and examples, but there is no consensus on the best practices for styling in React or the implications of the sidebar's behavior. The discussion also touches on technical issues related to version control and deployment processes.

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   Reactions: 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   Reactions: 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   Reactions: 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 ·
Replies
23
Views
2K