Skip to main content


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 />