时间戳

首页 > 解决方案 > 背景渐变不透明度不适用于样式化组件

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

问题描述

海我正在使用样式化组件，并且我的全局样式有以下代码：

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

标签： csstypescriptnext.jsstyled-components

解决方案

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

这里有一个样式化组件的官方 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 >);
}

推荐阅读