Skip to main content

CSS

Like any component, if you want to override a component's styles using custom classes, you can use the className prop.

<MuiOtpInput className="my-class-name" />

Then, you can use the differents global class names (see below) to target an element of MuiOtpInput.

Global classDescription
.MuiOtpInput-BoxStyles applied to the root element.
.MuiOtpInput-TextFieldStyles applied to each TextField component.
.MuiOtpInput-TextField-{n}Styles applied to a specific TextField component. ``.MuiOtpInput-TextField-3` to target the third TextField for example.
For example: target the .MuiTelInput-TextField global class name to customize all TextFields.

Example with styled-component / emotion​

import { styled } from 'styled-component' // or emotion
import { MuiOtpInput } from 'mui-one-time-password-input'

const MuiOtpInputStyled = styled(MuiOtpInput)`
  display: flex;
  gap: 30px;
  max-width: 650px;
  margin-inline: auto;
`

function MyComponent() {
  return <MuiOtpInputStyled />
}