As a novice in ReactJS, I am currently utilizing materia-ui to design a page.
I am looking to make a custom change on a TextField where the font size adjusts when text is entered. However, adjusting the font size creates too much space between the label and the bottom border of the input field. My goal is to only modify the font size once the Input field contains text.
Could you provide guidance on how I can achieve this?
Below is the code snippet that I have added to codesandbox
import React from "react";
import * as S from "./styles";
export default function App() {
return (
<div className="App">
<S.Input label="Name" variant="standard" />
</div>
);
}import styled from "styled-components";
import { TextField } from "@mui/material";
export const Input = styled(TextField)`
&& {
.MuiInputBase-root {
font-size: 30px;
}
}
`;Thank you for any assistance provided.
https://i.stack.imgur.com/onl1s.png
https://i.stack.imgur.com/bk2kz.png