Question

我使用此代码从顶部使我的按钮边距：

const makeTopMargin = (elem) => {
    return styled(elem)`
        && {
            margin-top: 1em !important;
        }
    `;
}

const MarginButton = makeTopMargin(Button);

并且每当我使用MarginButton节点时，都会出现此错误：Warning: Prop className did not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"

您可以看到生成的here。

我该怎么办？

Answer 1

//1.  I got an error when using material-ui with Next.js 


/********************************************* */

//2.  The code I imported was like this  : 


const useStyles = makeStyles({
    root: {     //  root must change 
        width: 100 ,
    }
});

const Footer = () => {
    const classes = useStyles();

    return (
        <div className={classes.root} > { /*  root must change */}
            <p> footer copyright @2021 </p>
        </div>
    )

}
export default Footer;


/********************************************* */

//3. I changed the code like this :


const useStyles = makeStyles({
    footer: {   //  changed here to footer
        width: "100%",
        backgroundColor: "blue !important"
    }
});

const Footer = () => {
    const classes = useStyles();

    return (
        <div className={classes.footer} > { /*  changed here to footer */}
            <p> footer copyright @2021 </p>
        </div>
    )

}
export default Footer;



// I hope it works

Answer 2

我试图遵循 Styled-Components 文档，但它对我不起作用。我找到了 fooMethod2() 文件的另一种语法：

.babelrc

Answer 3

您应该为样式组件安装babel插件，然后在.babelrc中启用该插件

npm install --save-dev babel-plugin-styled-components

.babelrc

{
  "plugins": [
    [
      "babel-plugin-styled-components"
    ]
  ]
}

Answer 4

Styled components server side rendering

服务器端渲染样式化组件支持并发服务器侧面渲染，带有样式表补水。基本思想是每次在服务器上呈现应用程序时，您都可以创建一个 ServerStyleSheet并向您的React树添加一个提供者，该接受者通过上下文API进行样式设置。

这不会干扰全局样式，例如关键帧或 createGlobalStyle，并允许您在React中使用样式化组件 DOM的各种SSR API。


import { renderToString } from 'react-dom/server'
import { ServerStyleSheet } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(sheet.collectStyles(<YourApp />))
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}


import { renderToString } from 'react-dom/server'
import { ServerStyleSheet, StyleSheetManager } from 'styled-components'

const sheet = new ServerStyleSheet()
try {
  const html = renderToString(
    <StyleSheetManager sheet={sheet.instance}>
      <YourApp />
    </StyleSheetManager>
  )
  const styleTags = sheet.getStyleTags() // or sheet.getStyleElement();
} catch (error) {
  // handle error
  console.error(error)
} finally {
  sheet.seal()
}

就我而言，我使用nextjs

import Document, { Head, Main, NextScript } from "next/document";
import { ServerStyleSheet } from "styled-components";

export default class MyDocument extends Document {
  static getInitialProps({ renderPage }) {
    const sheet = new ServerStyleSheet();
    const page = renderPage(App => props =>
      sheet.collectStyles(<App {...props} />)
    );
    const styleTags = sheet.getStyleElement();
    return { ...page, styleTags };
  }

  render() {
    return (
      <html>
        <Head>{this.props.styleTags}</Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </html>
    );
  }
}

Answer 5

通过在项目主文件夹中添加一个.babelrc文件来修复此警告，其内容如下：

var canvas = document.createElement('canvas'),
d = canvas.width = canvas.height = 250,
sq_size = d / 5,
ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
canvas.setAttribute('id','cav');

var color=["rgb(10,110,10)", "rgb(81,169,255)","rgb(81,239,255)", "rgb(81,255,202)", "rgb(81,255,132)","rgb(99,255,81)","rgb(169,255,81)", "rgb(239,255,81)", "rgb(255,202,81)","rgb(255,132,81)"];

var x=0, len=color.length;
var prevcolorh;
var colorobj = {};
for(var i=0; i < d;){
    colorobj[i] = {};
    while(x < d) {
        var c = Math.floor(Math.random() * len);
        colorobj[i][x] = color[c];
    
        var gradient = ctx.createLinearGradient(x, 0, x+sq_size, 0);
    
        var a = (prevcolorh !== undefined) ? prevcolorh : colorobj[i][x];
    
        gradient.addColorStop(0, a);
        gradient.addColorStop(1, colorobj[i][x]);
    
        prevcolorh = colorobj[i][x];
    
        ctx.fillStyle = gradient;
        ctx.fillRect(x, i, d, d);
    
        x = x + sq_size;
    }
    x = 0;
    i = i+sq_size;
}

var rgbs = {};
for(var i=0; i<d; i+=sq_size) {
    var imgd = ctx.getImageData(0, i+(sq_size/2), d, sq_size);
    rgbs[i] = {};
    var arr = [];

    for (var j = 0, c = 0, n = imgd.data.length; j < n; j += 4, c++) {
        if(j > 0 && j < d*4) {
         arr.push([imgd.data[j],imgd.data[j+1],imgd.data[j+2],imgd.data[+3]]);
        }
    }
    rgbs[i] = arr;
}

for(var k in rgbs) {
    for(var i=0; i<rgbs[k].length; i++) {
        if(rgbs[parseInt(k)+sq_size] !== undefined) {
            var gradient2 = ctx.createLinearGradient(0, parseInt(k)+(sq_size/2), 0, parseInt(k)+(sq_size/2) + sq_size);

            gradient2.addColorStop(0, 'rgba('+rgbs[k][i].join(',')+')');
            gradient2.addColorStop(1, 'rgba('+rgbs[parseInt(k)+sq_size][i].join(',')+')');
        
            ctx.fillStyle = gradient2;
            ctx.fillRect(i, parseInt(k)+(3*sq_size/4), 1, sq_size/2);
         
      }
   }
}

有关示例，请参见以下链接： https://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc

Answer 6

PropType错误是运行时错误，它将使您知道预期传递给prop的数据不是预期的。当组件在服务器上呈现，然后在客户端的DOM中呈现时，在组件上设置的className属性看起来并不相同。

由于看起来您正在使用服务器端呈现，因此需要确保您的类名是确定性的。该错误向您显示了服务器上styled-components库正在创建的类以及它与DOM有何不同。对于通常没有确定性类名的库，您需要查看高级配置。 Take a look at the styled-components documentation regarding specificity as it pertains to SSR。

警告：道具“ className”不匹配。当使用带样式的组件和语义用户界面反应时

6 个答案: