I was just trying out DesktopDatePicker component and experimenting a bit with it's costumization and noticed I couldn't find any information on how to style YearPicker from DesktopDatePicker.
To costumize PickersDay, for instance, I can use renderDay prop and render a StyledPickersDay.
However for YearPicker, I don't see a renderYear or anything similar :/
enter image description here
For context, I wanted to change the color from blue to orange
Is there a different way to do this or it just hasn't been implemented yet?
You can edit the CSS in the YearPicker component: https://mui.com/x/api/date-pickers/year-picker/#css
Related
I am using a React wrapper for intro js,
and I am trying to change the default background color for dialog buttons.
Here's a codesandbox given in the documentation
I want to change the background color of the Next button here
I have been trying to look this up all over the web but I cannot find a solution.
Any help would be greatly appreciated.
I had to inspect the element and override the CSS to make it work.
Then the color got changed correctly
Reference - https://stackoverflow.com/a/67566764/9977815
I'm working with Material-UI on my NextJS project, and wanted to know if is there a way to replicate the paper background-image on other components ? It will allow me to make some other components the exact same colors as Paper, because this background-image affect the color with a lighter effect.
EDIT: this effect seems to only occurs on dark mode
Thanks
Some components like Card, Dialog, Menu (and more) already use Paper as an inner component, then they get its style. The best way to add it to your components is to just use Paper as a surface.
You can also add variants to Mui components - for example, you add paper variant to TextField, and there add the styles.
A simpler way (but not complete) is to directly add the Mui-Paper className to another component (it is not complete because there are other styles except Mui-Paper. To achieve the elevation background-image effect you mantioned, you should add .MuiPaper-elevation{props.elevation} className.
I see in the antd docs, there is option to use ConfigProvider, where I can customize some styles or some behaviors.
In my case I want to customize outline style of elements(when I focus on input, it gives blue outline ring, so I just wanna make it green).
I wrapped my whole App inside ConfigProvider. But I can't find any example of code of actual customizing.
Any help will be appreciated :)
I have a react app that uses ant design and styled components and am trying to get antd tabs to render the full height available but setting height to 100% or min-height to 100% is not working, however if I set 100vh it works... but this (of course) does not give the result I want because the component I am trying to render is not the full height of the screen.
Does anyone have experience with ant design that might have a good trick? I've looked at some solutions here on stack overflow but they do not seem to work. One was to use a row and col (here). I've also read through issues on github that suggest to target the specific antd classes like this one but it also does not seem to work.
Finally, I have a code sandbox link here that I have taken directly from ant design's site and added a style prop to the TabPane, setting the height and background (just to be able to see the effect) if someone would like to fiddle with it.
Please chime in if you have experience and a definite solution or even a suggestion at this point. Thanks in advance.
you can do with height : 100vh property .with appropriate padding .
here is the code sandbox link for the same .
https://codesandbox.io/s/bold-silence-d02qi?file=/index.js:2079-2088
I have the following code:
header_contents.push(<DropdownButton bsSize='xsmall' bsStyle='link' pullRight={true} id={1} title='Menu'>
{item_menu}
</DropdownButton>);
I want to have the styling in Bootstrap to be white lettering (currently blue) as I think the link option is defaulted to that. How can you change the styling for Bootstrap to pass link color, and other properties like if you want to move the link down a little on the page?
I should mention we do very little CSS styling as most of that is done within the ReactJS components.
Either override bootstrap CSS in a css file (that is what your seem to avoid I understand): it is the better way to ensure a global effect over every link in your application.
Or do no sent bsStyle='link' as DropdownButton property but instead, insert a style property with custom CSS. Yet you can insert style even if you don't remove bsStyle. You could then create your own component wrapping DropdownButton to ensure the same graphic chart in your application.
I figured it out with the help of an online chat room. Here's what I did.
I first made a style (dropDownLinkStyle) in the react component like this.
let dropDownLinkStyle = {
color: 'white'
};
Then I used it (dropDownLinkStyle) in the dropdownButton like this.
header_contents.push(<DropdownButton bsSize='large' style={dropDownLinkStyle} bsStyle='link' pullRight={true} id={1 /* avoids react warning */} title='Menu'>
{item_menu}
</DropdownButton>);
I hope this helps. This allowed me to keep my bsStyle which is link (tells Bootstrap I want a link type on my screen instead of a button) and allows me to change that link to white lettering. I could also pass more styling by just adding it to the object -- dropDownLinkStyle