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
Related
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'm using Material UI Tabs in React to implement curved tabs (imagine like ones shown in Google Chrome). The structure must be such that the parent can give a bottom border which should stretch across the entire row making this bottom-border appear on tabs as well as on some other content on right. The selected (or active) tab, however, must remove the bottom border applied on it by its parent.
Expected Result:
Current Result:
The border from parent gets applied over the selected tab too, which is not what I want.
Here's the CodeSandbox link for my code.
Approach Taken:
I tried creating an ::after pseudo-element positioned absolute for selected tab with higher z-index. This pseudo-element creates a white-colored horizontal line and patches it over the bottom border applied by parent to overlap parent's border. However, I could not make it work. There were a couple of other CSS changes I applied; none seemed to move the parent's border. Any help to correct the existing approach I'm taking or suggesting a new approach to get the desired result is appreciated.
(Please note that I want to keep using Material UI Tabs as the base.)
On a side note, could anyone help why there's also some lag when selecting a tab?
Here is a way you can get your desired effect. Remove the parent bottom border, add a new css selector so you can give tabs that arent .MuiSelected a bottom border, then give the someother content div a bottom border so the grey line continues for the full length of the page (the grey is a slightly different shade cause of mui, but you could specifically set it to the right color):
https://codesandbox.io/s/curvy-tabs-using-material-ui-forked-lx57sw?file=/src/App.js
subtabs
import styled from "#emotion/styled";
import MuiTabs from "#material-ui/core/Tabs";
export const StyledSubTabs = styled(MuiTabs)`
.MuiButtonBase-root.MuiTab-root {
background: white;
border-radius: 8px 8px 0 0;
:hover {
background: pink;
}
}
.MuiButtonBase-root.MuiTab-root.Mui-selected {
border-top: 3px solid gray;
border-left: 3px solid gray;
border-right: 3px solid gray;
border-bottom: none; /* not working */
z-index: 10;
:hover {
background-color: pink;
}
}
//
//added this
//
.MuiButtonBase-root.MuiTab-root {
border-bottom: 3px solid gray;
z-index: 10;
:hover {
background-color: pink;
}
}
.MuiTabs-indicator {
display: none;
}
`;
app.js
import React, { useState } from "react";
import Tab from "#material-ui/core/Tab";
import { StyledSubTabs } from "./SubTabs.styles";
const App = () => {
const [index, setIndex] = useState(0);
const handleChange = (event, newIndex) => {
console.log("SubTab - index", newIndex, event);
setIndex(newIndex);
};
const parentStyles = {
// remove this ----> borderBottom: "3px solid gray",
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={parentStyles}>
<StyledSubTabs value={index} onChange={handleChange}>
<Tab label="Tab 1" />
<Tab label="Tab 2" />
<Tab label="Tab 3" />
</StyledSubTabs>
<div
//added this
style={{
borderBottom: "3px solid gray",
height: 45,
flexGrow: 1
}}
>
Some Other Content
</div>
</div>
);
};
export default App;
I'm working on an app with react, material-ui. I'm trying to add border to a div but failed. Following is my code
<div className={classes.search}>
...
</div>
search: {
...
borderWidth: '2px',
borderColor: theme.palette.primary.main,
},
I check in chrome and it shows my border parameter is identified by chrome as 2px, but chrome use 0px instead of 2px as final border width. Any ideas on how it happened?
Seems like you missed to set borderStyle.
You can set the border style with Material-UI theme like the following.
const useStyles = makeStyles((theme) => ({
search: {
border: `2px solid ${theme.palette.primary.main}`
}
});
I want to override the css of MuiButton but only if it's a descendant of MuiDialog.
In css you could do this with:
.MuiDialog-root .MuiButton-root {
border: 5px solid blue;
}
But I can't figure out how to do it in the theme overrides:
theme.overrides = {
MuiDialog: {
root: {
border: "7px solid red",
"& .MuiButton": { border: "5px solid blue" }
}
}
};
This didn't apply the style to the button.
Is it possible to override the style of a MUI button only if it's a descendant of some specified Mui component?
CodeSandbox
The classname in the theme overrides should be & .MuiButton-root
I was able to change the background of button within the dialog. Maybe you didn't use the right className:codesandbox.
MuiDialog: {
root: {
border: "7px solid red",
"& button": { backgroundColor: "blue" } // <- how to target MUIButton when descendent of MUIDialog?
}
}
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}}
/>