경고: prop 'className'이(가) 일치하지 않음. 의미-의리-반응과 함께 스타일 구성요소를 사용할 때
이 코드를 사용하여 단추를 위로부터 여백:
const makeTopMargin = (elem) => {
return styled(elem)`
&& {
margin-top: 1em !important;
}
`;
}
const MarginButton = makeTopMargin(Button);
그리고 내가 사용할때마다MarginButton노드, 다음 오류가 표시됨:Warning: PropclassNamedid not match. Server: "ui icon left labeled button sc-bwzfXH MjXOI" Client: "ui icon left labeled button sc-bdVaJa fKCkqX"
여기서 생산되는 것을 볼 수 있다.
어떻게 해야 하나?
이 경고는 프로젝트 메인 폴더에 .babelrc 파일을 추가하여 다음과 같은 내용으로 수정되었다.
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
https://github.com/nblthree/nextjs-with-material-ui-and-styled-components/blob/master/.babelrc의 예제는 다음 링크를 참조하십시오.
스타일 구성 요소용 babel 플러그인을 설치하고 .babelrc에서 플러그인을 사용하도록 설정하십시오.
npm install --save-dev babel-plugin-styled-components
.babelrc
{
"plugins": [
[
"babel-plugin-styled-components"
]
]
}
아니면 그냥 이걸 네 물건에 추가해도 돼.next.config.js이것은 또한 그것을 넥스트-swc (스피디 웹 컴파일러)가 빌드 시간을 줄이기 위해 작동하도록 만든다.자세한 내용은 여기를 참조하십시오.
// next.config.js
module.exports = {
experimental: {
// Enables the styled-components SWC transform
styledComponents: true
}
}
이미 babel 플러그인을 추가한 경우 .next build 폴더를 삭제하고 서버를 다시 시작하십시오.
신용: Parth909 https://github.com/vercel/next.js/issues/7322#issuecomment-912415294
//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 worksPropType 오류는 프로펠러에 전달될 것으로 예상되는 데이터가 예상된 데이터가 아님을 알려주는 런타임 오류입니다.구성요소가 서버에 렌더링될 때와 클라이언트의 DOM에 렌더링될 때 구성요소에 설정되고 있는 className 프로펠러가 같지 않은 것 같다.
서버측 렌더링을 사용하는 것처럼 보이므로 클래스 이름이 결정론적인지 확인하십시오.이 오류는 사용자가 만드는 클래스를 보여주는 것이다.styled-components서버의 라이브러리 및 DOM과 어떻게 다른지.일반적으로 결정론적 클래스 이름이 없는 라이브러리의 경우 고급 구성을 살펴보십시오.SSR과 관련된 특수성과 관련된 스타일 구성 요소 문서를 살펴보십시오.
서버 측 렌더링 스타일 구성 요소는 스타일시트 리하이드레이션과 함께 동시 서버 측 렌더링을 지원한다.기본 아이디어는 서버에서 앱을 렌더링할 때마다 컨텍스트 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>
);
}
}
나는 정확히 같은 문제를 겪고 있었는데 다음과 같은 방법으로 해결되었다.
npm i babel-preset-next
npm install --save -D babel-plugin-styled-components
이 파일을 .babelrc 파일에 추가:
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
나는 이 단계들을 따라 이 문제를 해결했다.
- 이름이 지정된 파일 만들기
.babelrc리리 및을.babelrc파일 - .next 빌드 폴더 삭제(일부 캐시 저장).
- 서버를 재시작하십시오.
- 브라우저를 핫 재로드하십시오.
.babelrc 파
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
NextJS 12를 사용하고 있는데 같은 문제가 발생했는데 콘솔에 오류가 있어서 코드가 잘 작동하고 있었다.
나는 그것을 만들면서 고쳤다..babelrc프로젝트의 루트에 파일을 작성하고 다음을 추가하십시오.
{
"presets": [
"next/babel"
],
"plugins": [
[
"styled-components",
{
"ssr": true,
"displayName": true,
"preprocess": false
}
]
]
}
내가 이 대답을 게시하는 주된 이유는 사람들이 절충을 이해하는 것을 돕기 위해서입니다.회사 를 할 때.babelrc다음 프로젝트에서는 러스트(Learn More) 기반의 SWC 컴파일러를 선택할 예정이다.
사용자 지정 바이블 구성을 선택할 때 이와 같은 메시지가 나타날 겁니다.
info - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc"
나는 이것을 더 자세히 조사해 보고, 단지 뒤따르는 것만 알아냈어!참조
Next.js는 이제 러스트 기반 컴파일러 SWC를 사용하여 JavaScript/TypeScript를 컴파일한다.이 새로운 컴파일러는 개별 파일을 컴파일할 때 Babel보다 최대 17배 빠르며 Fast Refresh 속도가 최대 5배 빠르다.
그래서 트레이드오프는 정말 컸고, 우리는 상당한 성과를 잃을 수 있다.그래서 나는 이 문제를 해결하고 SWC를 기본 컴파일러로 유지할 수 있는 더 좋은 해결책을 찾았다.
이 실험 플래그를 에 추가할 수 있다.next.config.js이 문제를 예방하기 위해서.참조
// next.config.js
module.exports = {
compiler: {
// ssr and displayName are configured by default
styledComponents: true,
},
}
create-react-app을 사용하는 경우 thi 솔루션을 사용할 수 있다.
styled.ts라는 파일
import styled from 'styled-components/macro';
import { css } from 'styled-components';
export const ListRow = styled.div`
...
...
`
파일 이름에 따라 접두사는 다음과 같다.
`${file_name}__{styled_component_name} ${unique_id}`
구현 시 다음과 같은 클래스 이름을 갖는다는 의미
file_name 대신 folder_name이라는 뜻에서 첫 번째 접두사를 가져올 위치를 지정하면 좋겠지만 folder_name이라는 폴더를 선택하십시오.나는 현재 그것에 대한 해결책을 모른다.
'IT이야기' 카테고리의 다른 글
| 왜 우리는 sys를 사용하지 말아야 하는가.py 스크립트에서 setdefaultencoding("utf-8")을 설정하시겠습니까? (0) | 2022.03.21 |
|---|---|
| Vue.js의 사용자 지정 양식 구성 요소에 네이티브 입력 이벤트를 사용해야 하는가? (0) | 2022.03.21 |
| 사전은 Python 3.6+로 주문되었는가? (0) | 2022.03.21 |
| nuxtjs의 vuex 모듈 모드 (0) | 2022.03.21 |
| Vue.js: 단일 파일 구성 요소에서 소품을 지정하는 방법? (0) | 2022.03.21 |