背景渐变不透明度不适用于样式组件

Question

Hai我使用的是样式组件，我的全局样式有以下代码：

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中运行良好，但由于某种原因，在我的nextjs应用程序中没有。知道为什么它不起作用吗？

测试浏览器：firefox

Answer 1

下面的代码片段可能对您有用。

这里有一个关于样式组件的官方nextjs示例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 >);
}