Wrong type ThemeOptions.shape.borderRadius

[joaogardenberg]

Steps to reproduce

It's not something reproduceable, it's just wrong typing.

Current behavior

Currently, the shape's borderRadius property is described as number:

Expected behavior

It should be number | string, as stuff like 1rem, 1em, 5%, 5vh and 5vw work alright.

Context

Would prevent getting errors like this when setting up the theme:

(yes, this works)

Your environment

npx @mui/envinfo

  System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  Binaries:
    Node: 22.11.0 - /usr/bin/node
    npm: 10.9.0 - /usr/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/core-downloads-tracker:  7.1.0 
    @mui/icons-material: ^7.1.0 => 7.1.0 
    @mui/material: ^7.1.0 => 7.1.0 
    @mui/private-theming:  7.1.0 
    @mui/styled-engine:  7.1.0 
    @mui/styled-engine-sc: ^7.1.0 => 7.1.0 
    @mui/system:  7.1.0 
    @mui/types:  7.4.2 
    @mui/utils:  7.1.0 
    @types/react: ^19.1.3 => 19.1.3 
    react: ^19.1.0 => 19.1.0 
    react-dom: ^19.1.0 => 19.1.0 
    styled-components: ^6.1.18 => 6.1.18 
    typescript: ~5.8.3 => 5.8.3 

Search keywords: typescript borderRadius type string number

[siriwatknp]

Would you like to submit a PR?

diff --git a/packages/mui-system/src/createTheme/shape.d.ts b/packages/mui-system/src/createTheme/shape.d.ts
index fba5ed44f3..ee808f8ba5 100644
--- a/packages/mui-system/src/createTheme/shape.d.ts
+++ b/packages/mui-system/src/createTheme/shape.d.ts
@@ -1,5 +1,5 @@
 export interface Shape {
-  borderRadius: number;
+  borderRadius: number | number;
 }
 
 export type ShapeOptions = Partial<Shape>;

[codiini]

Hi @siriwatknp I'd be interested in submitting a PR

[tneeraja95]

@siriwatknp This PR removed the string type from theme.shape.BorderRadius.

I think theme.shape.BorderRadius is used as a multiplier and therefore it should be a number.

[siriwatknp]

@siriwatknp This PR removed the string type from theme.shape.BorderRadius.

I think theme.shape.BorderRadius is used as a multiplier and therefore it should be a number.

It was valid because at the time, we did not use calc(). But since v7, calc() has been using so number or string works fine.

[siriwatknp]

Hi @siriwatknp I'd be interested in submitting a PR

Feel free to create a PR.