[system][Box] Set image explicit image width/height attribute without it being seen as a system property
Open
@siriwatknp is already working on this.
Since Mar 21, 2024.
component: Box
scope: system
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
Link to live example: https://codesandbox.io/p/sandbox/distracted-almeida-6lmqcs?file=%2Fsrc%2FDemo.tsx%3A6%2C7
Steps:
- Use a Box with component="img"
- Set width and height attributes
Current behavior
It sets the CSS width and height properties
Expected behavior
It should set the width and height HTML attributes
Context
I am trying to add dimensions to my images to optimize Cumulative Layout Shift.
I understand the way it works now is caused by the props being treated as system properties, but I still need a way to set the explicit HTML attributes.
Your environment
npx @mui/envinfo
System:
OS: Windows 11 10.0.22631
Binaries:
Node: 18.17.0 - C:\Program Files\nodejs\node.EXE
npm: 9.6.7 - C:\Program Files\nodejs\npm.CMD
pnpm: Not Found
Browsers:
Chrome: Not Found
Edge: Chromium (122.0.2365.92)
npmPackages:
@emotion/react: latest => 11.11.4
@emotion/styled: latest => 11.11.0
@mui/base: 5.0.0-beta.37
@mui/core-downloads-tracker: 5.15.11
@mui/icons-material: latest => 5.15.11
@mui/lab: latest => 5.0.0-alpha.166
@mui/material: latest => 5.15.11
@mui/private-theming: 5.15.11
@mui/styled-engine: 5.15.11
@mui/system: 5.15.11
@mui/types: 7.2.13
@mui/utils: 5.15.11
@types/react: latest => 18.2.61
react: latest => 18.2.0
react-dom: latest => 18.2.0
typescript: latest => 5.3.3
Search keywords: explicit width height
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.