React com Typescript

Question

Hello, I am learning to make React applications with TS, and within my studies I came across a problem.

I am exporting a component as follows

const Button = styled.button`
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
font-size: 1.2em;
margin: 2px;
float: right;
color: white;

`

export const RaisedButton = (props:IProps) => <Button>{props.label}</Button>

interface IProps {
label: string
}

When I import Raisedbutton into my index, it enters as the button class and the button is assigned only the . css properties set above.

I wonder if it is possible to assign multiple properties. css inside the same Button component, so I export several properties and do not need to recreate the component, only the properties.

Answer 1

I don’t know if that’s what you want, but you can pass the default attributes of a button to the child component as follows:

 const Button = styled.button<BtnProps>`
      height: 50px;
      width: 150px;
      color: white;
    `;
    
   interface MyButtonProps {
      label?: string;
    }
    
   type CustomButtonProps = MyButtonProps &
      React.ButtonHTMLAttributes<HTMLButtonElement>;
    
   export const CustomButton = (props: CustomButtonProps) => {
       const {label, ...defaultButtonProps} = props
       
       return <Button {...defaultButtonProps}>{props.label}</Button>;
    };