樣式化組件不重寫內(nèi)聯(lián)樣式

我正在嘗試重寫第三方組件內(nèi)聯(lián)樣式。

我遵循了文檔我怎么能覆蓋內(nèi)聯(lián)樣式

所以，我用&[style]重寫了內(nèi)聯(lián)樣式，但這不起作用。

我使用的第三方組件是CookieConsent

現(xiàn)在，我的組件看起來(lái)是這樣的：

import React from 'react';

import CookieConsent from 'react-cookie-consent';
import styled from 'styled-components';

const StyledCookieBanner = styled(CookieConsent)`
  &[style] {
    justify-content: center;
    align-items: center;
    width: calc(100% - 20px);
    margin: 10px;
    padding: 20px;
    background-color: white;
    border-radius: 22px;
    box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.17);
  }
`;

const CookieBanner = (): React.ReactElement => {
  return (
    <StyledCookieBanner debug buttonText='Ok'>
      Cookie
    </StyledCookieBanner>
  );
};

export default CookieBanner;

我還嘗試了如何用更高的特異性覆蓋樣式，但沒(méi)有成功。

我發(fā)現(xiàn)重寫樣式的唯一方法是這樣做并使用!important

const StyledCookieBanner = styled(CookieConsent)`
  > div {
    justify-content: center;
    align-items: center !important;
    width: calc(100% - 20px) !important;
    margin: 10px;
    padding: 20px;
    background-color: white !important;
    border-radius: 22px;
    box-shadow: 0 0 19px 3px rgba(0, 0, 0, 0.17);
  }
`;

也嘗試過(guò)，但沒(méi)有成功

const StyledCookieBanner = styled(CookieConsent)`
  > div {
    // &&& {
    &[style] {
      justify-content: center;
      align-items: center;
      ...
    }
  }
`;

文件看起來(lái)很清楚，但我沒(méi)有成功。

我錯(cuò)過(guò)什么了嗎？這是可能的還是應(yīng)該使用style組件道具？