React Slick Style Break When Integrate WIth AntD Tabs

[silviaphungky]

https://user-images.githubusercontent.com/55534481/229743010-e021464a-ba9e-4c72-a1c9-530c9f1b5afc.mov

React Slick + Tabs Ant Design

        <Tabs

titleList={['Top Gainer', 'Top Loser', 'Top Volume']} tabPaneList={[ <TopStock key="top-gainer" id="top-gainer" />, <TopStock key="top-loser" id="top-loser" />, <TopStock key="top-volume" id="top-volume" />, ]} tabBarGutter={0} />

   <Slider

{...settings} css={css .slick-track { display: flex !important; } .slick-list { padding: 0; } .slick-slide { will-change: transform; height: inherit !important; border: 1.5px solid #f4f4f4; padding: 1rem; border-radius: 0.5rem; background: white; margin: 0 0.3rem; } }

{Object.keys(items).map((key, i) => { const item = items[key as string] const symbol = key.split('.')[0]

        const priceType = () => {
          if (item.changeValue > 0) return 'success'
          else if (item.changeValue < 0) return 'danger'

          return 'secondary'
        }
        return (
          <div
            key={`${id}-${item.symbol}`}
            css={css`
              position: relative;
              height: 14rem;
            `}
          >
            {isLoading && <Skeleton active />}
            {!isLoading && (
              <>
                <div
                  css={css`
                    margin-bottom: 0.75rem;
                  `}
                >
                    <StockImgPlaceholder />
                </div>
                <Title
                  level={3}
                  css={css`
                    margin: 0;
                  `}
                >
                  {symbol}
                </Title>
                <Paragraph>{mappedName[key]}</Paragraph>
                <div
                  css={css`
                    position: absolute;
                    bottom: 0;
                    right: 0;
                  `}
                >
                  <Title
                    level={4}
                    isNumber
                    style={{
                      marginBottom: '0 !important',
                      marginTop: 0,
                      textAlign: 'right',
                    }}
                  >
                    {thousandSeparator(Number(item.lastPrice) || 0)}
                  </Title>
                  <Paragraph
                    css={css`
                      text-align: right;
                    `}
                    fontSize="0.875rem"
                    type={priceType()}
                    isNumber
                  >
                    {`${thousandSeparator(
                      Number(item.changeValue) || 0
                    )} (${thousandSeparator(
                      roundDecimal(item.changePercentage || 0, 100)
                    )}%)`}
                  </Paragraph>
                </div>
              </>
            )}
          </div>
        )
      })}
    </Slider>

[MINGLIANG98]

me too