непрозрачность фонового градиента не работает со стилизованными компонентами

Question

Привет, я использую стилизованные компоненты, и у меня есть следующий код для моего глобального стиля:

const GlobalStyle = createGlobalStyle`
    html{
        font-family: roboto;
        background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 0.25), rgba(255,167,137, 1));
        height: 100vw;
        overflow: hidden;
    }`
export default GlobalStyle

По какой-то причине фон имеет правильный цвет градиента, но непрозрачность не работает для указанного градиента . Я пробовал это, и он отлично работает в обычном html / css, но по какой-то причине не в моем следующем приложении js. Есть идеи, почему он не работает?

тестируемый браузер: firefox

Answer 1

Нижеприведенный фрагмент кода может работать для вас.

Здесь есть официальный следующий js пример для стилизованных компонентов https://github.com/vercel/next.js/blob/canary/examples/with-styled-components/pages/index.js

import styled from 'styled-components'

const GlobalStyle = styled.html`
  font-family: roboto;
  background: linear-gradient(45deg,rgba(137,255,255,0.5),rgba(161,252,143, 
  0.25), rgba(255,167,137, 1));
  height: 100vw;
  overflow: hidden;
  `
export default function StyledHtml({ children}) {
   return (<GlobalStyle>
       {children}
   </GlobalStyle >);
}