React attrs method Typescript

Question

I am getting following warning. I am using typescript.

"Over 200 classes were generated for component styled.div with the id of "sc-dkzDqf". Consider using the attrs method, together with a style object for frequently changed styles"

How can I convert this component using suggested attrs method with action script. Seems that every combination I do is not ok for typescript compiler...

    import React, { useState } from "react";
    import styled from "styled-components";

    import SliderBarNormal from ".././assets/SliderNormalBar.png";
    import SliderBarRgb from ".././assets/SliderRgbBar.png";
    import SliderBarColdWarm from ".././assets/SliderColdWarmBar.png";
    import SliderGaugeNormal from ".././assets/SliderNormalGauge.png";
    import SliderGaugeRgb from ".././assets/SliderRgbGauge.png";
    import SliderGaugeColdWarm from ".././assets/SliderColdWarmGauge.png";

    const VerticalSliderFill = styled.div<any>`
    position: absolute;
    width: ${(p: any) => p.width};
    bottom: 0;
    z-index: 2;
    height: 100%;
    background-image: url(${(p: any) => {if(p.type === "NORMAL") {return SliderGaugeNormal} if(p.type === "RGB") {return SliderGaugeRgb} if(p.type === "CW") {return SliderGaugeColdWarm} }});
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1%;
    transition: ${(p:any) => p.transition};
    
    clip-path: inset(${(p: any) => { var percentReverse = ((p.value - p.min) * (0 - 100)) / (p.max - p.min) + 100; return percentReverse; }}% 0 0 0);
    `;

    export default function VerticalSlider(props: any) {
    ...
     return (
        <VerticalSliderContainer width={props.width} height={props.height} padding={props.padding} margin={props.margin}>
          <VerticalSliderBar type={props.type}>
            <VerticalSliderFill
              type={props.type}
              min={props.min} 
              max={props.max}
              value={props.sliderFeedback}
              width={props.width}
              height={props.height}
              transition={transition}
            />
            <VerticalSliderInput
              type="range"
              min={props.min}
              max={props.max}
              step={props.step}
              value={props.sliderFeedback}
              name="thumb"
              width={props.width}
              height={props.height}
              onChange={handleChange}
              onTouchEnd={handleKeyUp}
              onMouseUp={handleKeyUp}
            />
          </VerticalSliderBar>
        </VerticalSliderContainer>
      );
    }

Answer 1

ok so following this post I figured it out. Compiler is happy everything works as before. Unfortunately everything is same as before so I am still getting warning about too many renders despite using attrs. Is that some sort of bug ?

https://lifesaver.codes/answer/how-do-you-use-attrs-with-typescript-1959

const VerticalSliderFill = styled.div.attrs<
    { type: string, width: string, transition: string, value:number, min:number, max:number}, // What is consumed by .attrs()
    { typeAttr: string, widthAttr: string, transitionAttr: string, valueAttr:number, minAttr:number, maxAttr:number} // What comes out of .attrs()
>((props) => 
{
    return {
      typeAttr: props.type,
      widthAttr: props.width,
      transitionAttr: props.transition,
      valueAttr: props.value,
      minAttr: props.min,
      maxAttr: props.max
    }
})<{ type: string, width: string, transition: string, value:number, min:number, max:number }> // The outer type
`
    position: absolute;
    width: ${(p: any) => p.widthAttr};
    bottom: 0;
    z-index: 2;
    height: 100%;
    background-image: url(${(p: any) => {if(p.typeAttr === "NORMAL") {return SliderGaugeNormal} if(p.typeAttr === "RGB") {return SliderGaugeRgb} if(p.typeAttr === "CW") {return SliderGaugeColdWarm} }});
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1%;
    transition: ${(p:any) => p.transitionAttr};

    clip-path: inset(${(p: any) => { var percentReverse = ((p.valueAttr - p.minAttr) * (0 - 100)) / (p.maxAttr - p.minAttr) + 100; return percentReverse; }}% 0 0 0);
`;

Example from link above:

  import styled from 'styled-components'
  
  const Container = styled.div.attrs<
      { size: number }, // What is consumed by .attrs()
      { width: number, height: number } // What comes out of .attrs()
  >((props) => {
      return {
          width: props.size,
          height: props.size,
      }
  })<{ size: number }> // The outer type
  `
      width: ${props => props.width}px;
      height: ${props => props.width}px;
`

const container = <Container size={200} />