我想用styled-components
在 React 应用程序中创建一个菜单组件,其中包含同一文件中的样式,从而使其非常模块化。我在用着react-burger-menu
对于菜单。如果我包装一切正常BurgerMenu
在有风格的div
像这样(样式复制自react-burger-menu
自述文件.md):
import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';
const StyledBurgerMenu = styled.div`
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Individual item */
.bm-item {
display: inline-block;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
`;
export class Menu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<StyledBurgerMenu>
<BurgerMenu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
</BurgerMenu>
</StyledBurgerMenu>
);
}
}
export default Menu;
现在这当然完全没问题。但是,为了吸取教训并使事情变得更加优雅,我想摆脱嵌套BurgerMenu
代替StyledBurgerMenu
通过将前者传递给styled()
。然而,这导致汉堡按钮没有样式(根据文档,它透明地覆盖在整个屏幕上,因此我可以单击任意位置打开菜单并查看其他所有内容的样式是否正确)。是否可以以这种方式设计汉堡按钮的样式,或者我是否必须使用外部div
?以下是我尝试解决此问题的方法:
import React from 'react';
import { slide as BurgerMenu } from 'react-burger-menu';
import styled from 'styled-components';
const StyledBurgerMenu = styled(BurgerMenu)`
/* Position and sizing of burger button */
.bm-burger-button {
position: fixed;
width: 36px;
height: 30px;
left: 36px;
top: 36px;
}
/* Color/shape of burger icon bars */
.bm-burger-bars {
background: #373a47;
}
/* Position and sizing of clickable cross button */
.bm-cross-button {
height: 24px;
width: 24px;
}
/* Color/shape of close button cross */
.bm-cross {
background: #bdc3c7;
}
/* General sidebar styles */
.bm-menu {
background: #373a47;
padding: 2.5em 1.5em 0;
font-size: 1.15em;
}
/* Morph shape necessary with bubble or elastic */
.bm-morph-shape {
fill: #373a47;
}
/* Wrapper for item list */
.bm-item-list {
color: #b8b7ad;
padding: 0.8em;
}
/* Individual item */
.bm-item {
display: inline-block;
}
/* Styling of overlay */
.bm-overlay {
background: rgba(0, 0, 0, 0.3);
}
`;
export class Menu extends React.Component {
showSettings(event) {
event.preventDefault();
}
render() {
return (
<StyledBurgerMenu>
<a id="home" className="menu-item" href="/">Home</a>
<a id="about" className="menu-item" href="/about">About</a>
</StyledBurgerMenu>
);
}
}
export default Menu;
Thanks!
是否可以以这种方式设计汉堡按钮的样式,或者我有
使用外部div?
通过通过你的BurgerMenu
对于 styled,您不会添加外部 div,styled 组件仅确保您的 css 添加到文档中并传递className
to BurgerMenu
。所以为了让它发挥作用,BurgerMenu
必须渲染它的className
支柱。如果这样做,它将在没有外部 div (或任何其他父级)的情况下工作。
根据https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251 https://github.com/negomi/react-burger-menu/blob/95a58dd41e546730f5661dd7ad8deb7296a725ff/src/menuFactory.js#L251它分配它的className
支持内部 div,这对于styled-components
但你的风格将适用于此div
。如果您想将其他元素设置为等于或高于该级别,您将需要提出一些奇特的选择器或从外部分配它们。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)