React Slick Style Break When Integrate WIth AntD Tabs

[silviaphungky]

Screen.Recording.2023-04-04.at.16.01.32.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