问题描述
我得到了这个错误，虽然项目中没有一行带有:first-child，但为什么会出现?
I got this error, although there is not a single line in the project with :first-child, why does it appear?
.....................................…………………………………………………………………………………………………………………………………………......................................................…………………………………………………………………………………………………………………………………………...................................................
......................................................................................................................................................................................................................................................
"dependencies": {
"@storybook/addon-a11y": "^5.1.9",
"@trendmicro/react-popover": "^0.4.0",
"@types/classnames": "^2.2.9",
"@types/jest": "24.0.13",
"@types/node": "12.0.2",
"@types/react": "16.8.18",
"@types/react-dom": "16.8.4",
"@types/react-modal": "^3.8.2",
"@types/storybook__addon-a11y": "^5.0.0",
"@types/storybook__addon-actions": "^3.4.3",
"@types/storybook__addon-info": "^4.1.1",
"@types/storybook__addon-knobs": "^5.0.0",
"@types/storybook__react": "4.0.1",
"@types/styled-components": "4.1.15",
"classnames": "^2.2.6",
"grommet": "^2.7.2",
"react": "16.8.6",
"react-dom": "16.8.6",
"react-modal": "^3.9.1",
"react-scripts": "3.0.1",
"react-toastify": "^5.3.2",
"styled-components": "^4.2.0",
"typescript": "^3.5.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook",
"build-storybook": "build-storybook -c .storybook -o .out",
"lint": "tslint -c tslint.json src/**/*.{ts,tsx} --fix --format verbose",
"tslint-check": "tslint-config-prettier-check ./tslint.json",
"precommit": "lint-staged"
},
"lint-staged": {
"{src,test}/**/*.{ts,tsx}": [
"prettier --write",
"git add"
]
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@storybook/addon-actions": "5.1.9",
"@storybook/addon-info": "^5.1.9",
"@storybook/addon-knobs": "^5.1.9",
"@storybook/addon-links": "5.1.9",
"@storybook/addon-storysource": "^5.1.9",
"@storybook/addons": "5.1.9",
"@storybook/core-events": "latest",
"@storybook/react": "5.1.9",
"@storybook/theming": "latest",
"husky": "^3.0.0",
"lint-staged": "^9.1.0",
"react-docgen-typescript-loader": "3.1.0",
"react-docgen-typescript-webpack-plugin": "1.1.0",
"storybook-addon-styled-component-theme": "^1.2.3",
"ts-loader": "^6.0.4",
"tslint": "^5.18.0",
"tslint-config-airbnb": "^5.11.1",
"tslint-config-prettier": "^1.18.0",
"tslint-plugin-prettier": "^2.0.1",
"tslint-react": "^4.0.0"
}
推荐答案
本文来自 @emotion通过故事书 - 因为情感(通过 JavaScript 创建 CSS)有时会在开头注入一个 <style> 元素 - 这会使它成为第一个孩子并破坏你的 CSS.first-of-type 现在大多数浏览器都支持a> 并且可以在许多情况下交替使用.
This comes from @emotion through storybook - since emotion (creates CSS through JavaScript) sometimes injects a <style> element in the beginning - which would make that the first child and breaks your CSS. first-of-type is supported in most browsers these days and can be used in many cases alternatively.
既然你说你实际上没有一个带有第一个子伪选择器的行，那么故事书本身很可能使用不安全"的选择器.CSS 规则.
Now since you said you don't actually have a line with a first-child pseudo selector it is most likely storybook themselves using an "unsafe" CSS rule.
这篇关于伪类“:first-child"在进行服务器端渲染时可能不安全.尝试将其更改为“:first-of-type"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！