Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Theming prop `size` conflicts with input prop `size`

See original GitHub issue

Description

When I want to set the DOM attribute size={3} of an <input> element, I am unable to do it with <Input> since size is interpreted as a theme prop, and not a native attribute.

Link to Reproduction

https://codesandbox.io/s/jovial-mendeleev-upylk?file=/src/index.js

Steps to reproduce

See above CodeSandbox

Chakra UI Version

1.6.3

Browser

No response

Operating System

macOS
Windows
Linux

Additional Information

No response

Issue Analytics

State:
Created 2 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

2reactions

davidkpianocommented, Feb 1, 2022

Hi David, Thanks for raising this issue.

I think this prop name clash is comparable to the attributes width and height for the Image component where we added htmlWidth and htmlHeight as props.

My suggestion would be to add a new prop to the Input component called htmlSize and pass it to the input DOM element.

Would that solve your issue?

Yep, sounds like a good solution!

2reactions

TimKolbergercommented, Feb 1, 2022

Hi David, Thanks for raising this issue.

I think this prop name clash is comparable to the attributes width and height for the Image component where we added htmlWidth and htmlHeight as props.

My suggestion would be to add a new prop to the Input component called htmlSize and pass it to the input DOM element.

Would that solve your issue?

Top Results From Across the Web

Advanced Usage - styled-components

Theming. styled-components has full theming support by exporting a <ThemeProvider> wrapper component. This component provides a theme to all React ...

<input>: The Input (Form Input) element - HTML

Valid for email , password , tel , url , and text , the size attribute specifies how much of the input is...

Global Styling with Material-UI Theme Overrides and Props

Learn how to use global CSS overrides and default props in a theme to customize all instances of a Material-UI component in a...

How to Create Smaller `Input` in React-Bootstrap | Pluralsight

Another possible value for the size prop is lg , which will increase the size of the field. Using Custom CSS. The traditional...

styled() - MUI System

overridesResolver ((props: object, styles: Record<string, styles>) => styles [optional]): Function that returns styles based on the props and the theme.