React - changing default properties

  • Thread starter mathmari
  • Start date
  • Tags
    Properties
In summary: As you can see, the "!important" at the beginning of the two rules ensures that the width changes take precedence over any other settings on the page - even if those settings have the same name and are set in a higher priority file.
  • #1
mathmari
Gold Member
MHB
5,049
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
  • #2
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
  • #3
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
  • #4
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? 🤔
 
  • #5
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;
    }
}
 
  • #6
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? 🤔
 
  • #7
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.
 
  • #8
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? 🤔
 
  • #9
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?
 

FAQ: React - changing default properties

What is React?

React is a JavaScript library that is used for building user interfaces. It allows developers to create reusable components and efficiently update and render these components when there are changes in the data.

What are default properties in React?

Default properties, also known as defaultProps, are predefined properties that are assigned to a React component in case no props are passed into the component. These defaultProps can be defined in the component's class or as a static property outside the class.

How do you change default properties in React?

To change default properties in React, you can pass in new props to the component when it is being rendered. React will then use these new props instead of the default ones. Additionally, you can also update the defaultValue property in the component's state to change the default value.

Why would you want to change default properties in React?

Changing default properties can be useful when you want to customize the behavior of a component. For example, if you have a button component with a default color of blue, but you want to use it in a different context where a different color would be more appropriate, you can change the default color prop to achieve this.

Are there any limitations to changing default properties in React?

One limitation is that default properties can only be changed when the component is initially rendered. Once the component is mounted, changing the default properties will not have any effect. Additionally, if a parent component passes in props to a child component, these props will override the default properties defined in the child component.

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
1K

Hot Threads

Recent Insights

Back
Top