Styling textarea in MUI using Styled Components - css

Question

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?

Answer 1

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