0
149
VistasHow to change font-size from TextField when is focused?
I'm beginner in ReactJS and I'm using materia-ui to create a page.
I need to do a custom on a TextField, I'd like to change the font-size when the input field is filled with some text. When I change the font-size, there is a very large space between the label and the border-bottom of the Input field. So I need to change the font-size only when the Input field is filled.
Could u tell me how can I do that?
Here's my code I put into 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 very much for any help.
1 Respuestas
Responde la pregunta0
Here's a couple of ways, keep in mind I have never really used mui components.
Both involve magic numbers which aren't the best practice being completely honest.
The first solution involves adjusting the y position of the label initially, and when the text area is focused. sandbox link
export const Input = styled(TextField)`
&& {
.MuiInputBase-root {
font-size: 30px;
}
.MuiInputLabel-root {
transform: translateY(40px);
}
.Mui-focused {
transform: translateY(0px);
}
}
`;
The second approach is similar, but uses line-height instead. Again, using focused and initial label classes.
export const Input = styled(TextField)`
&& {
.MuiInputBase-root {
font-size: 30px;
}
.MuiInputLabel-root {
line-height: 60px;
}
.Mui-focused {
line-height: 22px;
}
}
`;