trampa-frontend/src/components/TextFields/TextField/TextField.styled.js

import { Box, TextField } from "@mui/material";
import styled from "styled-components";
import selectedTheme from "../../../themes";

export const TextFieldContainer = styled(Box)`
  width: 100%;
  height: ${(props) => props.height};
  box-sizing: border-box;
  margin: 16px 0;
  padding-left: 0;
`;

export const TextFieldStyled = styled(TextField)`
  background-color: ${selectedTheme.primaryBackgroundColor};
  width: ${(props) => props.width};
  font-style: ${(props) =>
    props.italicplaceholder === true ? "italic" : "normal"};
  padding-left: 0;
  margin: 0;
  padding: 0;
  height: ${(props) => props.height};
  box-sizing: border-box;

  & div {
    padding-left: 2px;
    ${(props) =>
      props.multiline &&
      `
      padding: 10px 16px;
      max-height: ${props.height};
      overflow-y: auto;
      & fieldset {
        border: 1px solid rgba(0, 0, 0, 0.23);
  border-radius: 4px;
      }
    `}
  }
  & div input {
    height: ${(props) => props.height};
    box-sizing: border-box;
    font-size: ${(props) =>
      props.textsize ? props.textsize : "16px"} !important;
    font-family: ${(props) => (props.font ? props.font : "")};
  }
`;