CODEWITHSUNDEEP
cssreactjsmaterial-ui
Victor M
Victor M

Reputation: 749

Styling textarea in MUI using Styled Components

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?

Upvotes: 1

Views: 2323

Answers (1)

Luiz Avila
Luiz Avila

Reputation: 1366

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

Upvotes: 2

Related Questions