How to use styled components with Material UI input? - reactjs

Question

I have a slight problem with Material UI input, I want to change the design of it using styled components, but I came across an issue. This is my code:
import React from "react";
import styled from "styled-components";
import Input from "#mui/material/Input";
import InputAdornment from "#mui/material/InputAdornment";
import { BiSearch } from "react-icons/bi";
const InputContainer = styled(Input)`
width: 350px;
height: 42px;
border-radius: 2px;
border: 1px solid #c0c0c0;
`;
const SearchIcon = styled(BiSearch)`
color: #c0c0c0;
margin-left: 14px;
`;
const InputComponent = ({ placeholder, type }) => {
return (
<div>
<InputContainer
placeholder={placeholder}
startAdornment={
type === "Search" ? (
<InputAdornment position="start">
<SearchIcon size="20" />
</InputAdornment>
) : (
""
)
}
/>
</div>
);
};
export default InputComponent;
What I want to do:
Change placeholder size
When user hovers or clicks on input there is no bottom border like there is now, basically I want to remove bottom border
How do I achieve this?

Answer 1

Change placeholder size
For this, you can target the input element and change the font size. e.g.
const InputContainer = styled(Input)`
width: 350px;
height: 42px;
border-radius: 2px;
border: 1px solid #c0c0c0;
input::placeholder {
font-size: 20px;
}
`;
When user hovers or clicks on input there is no bottom border like
there is now, basically I want to remove bottom border
For this, you can use the disableUnderline prop. e.g the updated code will be
<InputContainer
placeholder={placeholder}
disableUnderline
startAdornment={
type === "Search" ? (
<InputAdornment position="start">
<SearchIcon size="20" />
</InputAdornment>
) : (
""
)
}
/>