React中Material-UI Breakpoint类型的PropTypes设置报错求助

I see you're hitting a TypeScript type mismatch when trying to set up PropTypes for Material-UI's Breakpoint type. Let's break down the issue and fix it step by step.

The Problem #

Your code defines the width prop as the Breakpoint union type ('xs' | 'sm' | 'md' | 'lg' | 'xl'), but when you use PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']), TypeScript infers the validator as a Validator<string> instead of Validator<Breakpoint>. This causes the type error you're seeing:

Type '{ width: Validator; }' is not assignable to type 'WeakValidationMap'. Types of property 'width' are incompatible. Type 'Validator' is not assignable to type 'Validator'. Type 'string' is not assignable to type 'Breakpoint'.ts(2322)

The Solutions #

Solution 1: Use Type Assertion on the Breakpoint Array

You can explicitly tell TypeScript that the array of breakpoint strings matches the Breakpoint type using a type assertion:

import React, { FC } from 'react'
import PropTypes from 'prop-types'
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'
import withWidth from '@material-ui/core/withWidth'

interface IApp { width: Breakpoint }

const App: FC<IApp> = ({ width }) => { 
  // Your component code here
  return <div>Current width: {width}</div>
}

App.propTypes = {
  width: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'] as Breakpoint[]).isRequired,
}

export default withWidth()(App)

By asserting the array as Breakpoint[], TypeScript will recognize the validator as matching the Breakpoint type instead of a generic string.

Solution 2: Use as const to Lock the Array Type

Another cleaner approach is to define a constant array with as const, which preserves the exact literal types of the elements (instead of widening them to string):

import React, { FC } from 'react'
import PropTypes from 'prop-types'
import { Breakpoint } from '@material-ui/core/styles/createBreakpoints'
import withWidth from '@material-ui/core/withWidth'

interface IApp { width: Breakpoint }

// Define breakpoints with literal type preservation
const breakpoints = ['xs', 'sm', 'md', 'lg', 'xl'] as const;

const App: FC<IApp> = ({ width }) => { 
  // Your component code here
  return <div>Current width: {width}</div>
}

App.propTypes = {
  width: PropTypes.oneOf(breakpoints).isRequired,
}

export default withWidth()(App)

This works because as const makes the array's type readonly ['xs', 'sm', 'md', 'lg', 'xl'], which TypeScript can map directly to the Breakpoint union type.

Why This Works #

Both approaches fix the type mismatch by ensuring that the PropTypes validator's type aligns with the Breakpoint union type instead of a generic string. TypeScript needs this explicit hint because it can't automatically infer that the string array exactly matches the union type you've imported from Material-UI.

内容的提问来源于stack exchange，提问作者Xiduzo