So I am creating a UI component for my app to make styling consistent. That means, I need access to spread props for doing things like value
, onChange
etc.
This is what my TextInput
component looks like:
import { DetailedHTMLProps, InputHTMLAttributes } from 'react';
import styled from 'styled-components';
const StyledInput = styled.input`
display: block;
width: 100%;
margin-top: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
border: 1px solid #e2e8f0;
line-height: 1.5;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
`;
export const TextInput = ({
...rest
}: DetailedHTMLProps<
InputHTMLAttributes<HTMLInputElement>,
HTMLInputElement
>) => (
<>
<StyledInput type="text" {...rest} />
</>
);
But styled-components
is giving me an error: Types of property 'ref' are incompatible.
What could be the problem?
this question is similar to yours and answered, you might want to check it Using 'ref' on React Styled Components is not working
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.