I am trying to make an input component that has a white underline. Currently, when the user hovers over the component, the underline color changes to black. I would expect this be white. I believe this should be possible by overriding the underline class as in the demo and outlined below. Unfortunately, it doesn't seem to work, but if I inspect the styles manually in the browser and remove the below line it works as expected in the browser.
Example: https://stackblitz.com/edit/yjpf5s (View: https://yjpf5s.stackblitz.io)
Style removed manually in browser to obtain desired functionality:
.MuiInput-underline-365:hover:not(.MuiInput-disabled-364):not(.MuiInput-focused-363):not(.MuiInput-error-366):before {
border-bottom: 2px solid rgba(0, 0, 0, 0.87);
The overide class style I am using:
underline: {
color: palette.common.white,
borderBottom: palette.common.white,
'&:after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:focused::after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:error::after': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&:before': {
borderBottom: `1px solid ${palette.common.white}`,
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${palette.common.white}`,
},
'&$disabled:before': {
borderBottom: `1px dotted ${palette.common.white}`,
},
},
Edit:
Here is the solution that ended up working:
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${palette.common.white} !important`,
},
I took a look at the source code and they are doing something like this
{
focused: {},
disabled: {},
error: {},
underline: {
'&:before': {
borderBottom: '1px solid rgba(255, 133, 51, 0.42)'
},
'&:after': {
borderBottom: `2px solid ${theme.palette.secondary.main}`
},
'&:hover:not($disabled):not($focused):not($error):before': {
borderBottom: `2px solid ${theme.palette.secondary.main}`
}
}
It works for me.
Inspired by Guillaume's answer, here is my working code, simplified if you don't care about error state:
const WhiteTextField = withStyles({
root: {
'& .MuiInputBase-input': {
color: '#fff', // Text color
},
'& .MuiInput-underline:before': {
borderBottomColor: '#fff8', // Semi-transparent underline
},
'& .MuiInput-underline:hover:before': {
borderBottomColor: '#fff', // Solid underline on hover
},
'& .MuiInput-underline:after': {
borderBottomColor: '#fff', // Solid underline on focus
},
},
})(TextField);
Use:
<WhiteTextField
fullWidth
onChange={this.handleNameChange}
value={this.props.name}
/>
At first, add your input like this
<Input {...props} className='myClass' />
Now in your CSS
.gc-input-bottom::after{
border-bottom: 2px solid $input-border-color-active!important;
:hover{
border-bottom: none!important;
}
}
.gc-input-bottom::before{
border-bottom: 1px solid $input-border-bottom-color!important;
}
Here before will give you the always visible underline access and after will give you the after click underline access. Now just do what you want
try like this
.MuiInput-underline-24:hover:not(.MuiInput-disabled-23):not(.MuiInput-focused-22):not(.MuiInput-error-25):before {
border-bottom: 2px solid rgb(255, 255, 255) !important;
}
Related
I'm using MUI version 5 and in particular I would like to use, in createTheme, the muiCssBaseLine customization part
createTheme({
palette: {
...
},
...,
MuiCssBaseline: {
styleOverrides: {
... my code
}
},
});
and apply some style to a generic class that I can apply to any mui component.
Therefore I can't be specific and use it under (for example) MuiChip, but it must be generic for any component.
MuiChip: {
// too specific
styleOverrides: {
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none'
}
}
}
I figured this might work, but it doesn't work:
MuiCssBaseline: {
styleOverrides: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
},
I also tried
MuiCssBaseline: {
styleOverrides: {
root: {
'&.myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
}
}
},
I also tried some variations:
'& .myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
'myClass': {
marginLeft: '1px solid black',
boxShadow: 'none',
},
myClass: {
marginLeft: '1px solid black',
boxShadow: 'none',
},
but nothing works
Not sure why this doesn't work, but I can't seem to use focus and hover in the same MUI styled component for React. Here is a code sandbox to illustrate what I mean. When I click on the Select element, the background and border don't change colors:
const SelectStyle = styled(Select)(({ theme }) => ({
width: "175px",
border: `1px solid #C4CDD5`,
borderRadius: 3,
fontSize: "1.2rem",
"&:hover": {
backgroundColor: "#DFE3E8",
border: `1px solid #919EAB`
},
"&:focus": {
backgroundColor: "#54D62C",
border: `1px solid #AAF27F`
},
"& .MuiSelect-select": {
paddingTop: 5,
paddingBottom: 5,
fontSize: "1.2rem",
alignItems: "center",
display: "inline-flex"
}
}));
Not sure why this is or how to fix it?
Override .Mui-focused class like this :
"&.Mui-focused": {
backgroundColor: "#54D62C",
border: `1px solid #AAF27F`
}
Here is working example.
I am trying to change the border color on focus on a textarea component in MUI. I am using styled components:
import "./styles.css";
import { styled } from "#mui/material/styles";
const TextAreaStyle = styled("textarea")(({ theme }) => ({
border: `2px solid #F9FAFB`,
width: "100%",
flexGrow: 1,
boxSizing: "border-box",
borderRadius: 3,
backgroundColor: "#f8f8f8",
// font-size: 16px;
resize: "none",
"&:focus": {
border: `2px solid #454F5B`
},
"&:hover": {
border: `2px solid #F4F6F8`
}
}));
export default function App() {
return (
<div className="App">
<TextAreaStyle />
</div>
);
}
Sandbox: https://codesandbox.io/s/youthful-sammet-qhsfqf?file=/src/App.js
However, while the hover works, the focus does not work. The border color still looks like the default color. Can someone point me in the right direction?
Your code is working, is just that the color you have is too light and similar to the default color. Check it out:
https://codesandbox.io/s/cranky-leakey-mtfutl
EDIT: Updated the sandbox to remove the outline from Chrome
To remove that outline that some browsers have you just have to do
outline: "none"
SECOND EDIT:
for showing the focus border while on hover, just change the order of the styles, with focus last:
"&:hover": {
border: `2px solid #FF0000`
},
"&:focus": {
border: `2px solid #0FF00F`,
outline: "none"
}
I updated the sandbox to reflect that
I have a problem with changing the border color of table cell.
I've tried many times but it doesn't work.
please help me.
const theme = createTheme({
overrides: {
MuiTableCell: {
root: {
borderBottom: '1px solid #ff0000',
},
},
},
})
I tried above theme to table. but it doesn't work.
MuiTableCell: {
styleOverrides: {
head: {
borderBottom:"1px solid red"
},
body: {
borderBottom:"1px solid blue"
},
footer: {
borderBottom:"1px solid yellow"
},
}
}
I want to change the default border color of an outlined textfield from gray to a darker blue.
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={classes.codeInput}
error={code ? code.length < 10 : false}
/>
This is the codeInputclass:
codeInput: {
marginTop: theme.spacing.unit,
},
I have tried overriding the color via theme, but it does not work:
overrides: {
MuiOutlinedInput: {
root: {
borderColor: "#2b303e"
},
notchedOutline: {
borderRadius: "0",
borderWidth: "2px",
borderColor: "#2b303e"
},
},
}
It is still gray as you can see in the image.
I have identified the following css rules as the problem. With disabling this, everything looks fine. I just don't know how to do this
.MuiOutlinedInput-root-148 .MuiOutlinedInput-notchedOutline-155 {
border-color: rgba(0, 0, 0, 0.23);
}
Create a new css class for example:
// app.css
.blueBorder {
}
Add in the border you want and add !important; to overwrite.
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
Assign it to your component:
// js / react component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={`blueBorder ${classes.codeInput}`}
/>
Update to show error class
// app.css
.blueBorder{
border-radius: 0px!important;
border: 2px solid #2b303e!important;
}
// Red border to denote error
.blueBorder-error {
border-radius: 0px!important;
border: 2px solid red!important;
}
Use the error class in the components className
condition ? true : false
// js / component
<TextField
variant={"outlined"}
placeholder={t('landing_page.code.placeholder')}
onChange={this.onCodeChanged}
value={code}
fullWidth={true}
className={code.length < 10 ? `blueBorder-error ${classes.codeInput}` : `blueBorder ${classes.codeInput}}
/>