i am using material ui for my project and this is my textField
text field reality
as you can see there is an bottom border underline it, but i want to remove it completely, previously i usually use border: "0px" but i dont know how to customize it, this is what i want
text field expectation
thank for your time to help me out, highly appreciate your effort, hope you have a good day
you can edit in this codesandbox link: codesanboxlink
for this case you can import InputBase from material-ui
import InputBase from '#material-ui/core/InputBase';
you can see your example at codesandbox codesandboxlink
Related
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
i want to style a TextField component, but i'm having a really hard time with it. I saw a few ways to do it, but i don't really get it. Also, apprently the makeStyles is deprecated, so i'm really lost here.
I have this TextField
And i want the outline border to be white and the input color. When i focus and click on it, it works fine. As for the input, i styled it with inputLabelProps with color:'white', but when i click on it doesn't change to the same color as the border.
Thanks in advance
I am using import TimePicker from '#mui/lab/TimePicker'; time picker, and I need ability to manually confirm or cancel the selection. In the documentation I see cancelText and okText options, but there are no ability to show those buttons (showToolbar is not relevant). Maybe I missed something, could somebody please help me?
`
nowiko
I had same issue, thats how i resolved it !!!
.css-1e6y48t-MuiButtonBase-root-MuiButton-root {
display: none !important;
}
Just add this class, this will hide whole div of buttons..
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