@totalsoft/rocket-ui/src/components/inputs/TextField/TextFieldStyles.ts

A set of reusable and composable React components built on top of Material UI core for developing fast and friendly web applications interfaces.

import MuiTextField from '@mui/material/TextField'
import Button from '@mui/material/Button'
import { styled } from '@mui/material/styles'

const PREFIX = 'StyledTextField'
export const classes = {
  label: `${PREFIX}-label`,
  input: `${PREFIX}-input`,
  stepperFixedWidth: `${PREFIX}-stepper`
}

export const TextField = styled(MuiTextField)(({ theme }) => ({
  [`& .${classes.input}`]: {
    '&,&::placeholder': {
      ...theme.typography.defaultFont,
      fontWeight: '400'
    }
  },
  [`& .${classes.stepperFixedWidth}`]: {
    width: '120px'
  }
}))

export const StepButton = styled(Button)(({ theme }) => ({
  fontFamily: theme.typography.fontFamily,
  minWidth: '28px',
  height: '28px',
  fontSize: '22px',
  fontWeight: 'bold',
  borderRadius: 'unset'
}))