问题描述
我知道这似乎是一个基本问题,但是尽管有关sass和bem的著作非常多,但我仍缺少这种继承如何与嵌套一起工作的信息。也许有人可以澄清。
.Header {
padding: 1rem;
&__nav {
display: flex;
align-items: center;
&-link {
@include fonts.bold;
font-size: 1.15rem;
&--active {
color: red;
}
}
}
}
然后是这个组件:
const NavLink = props => (
<Link
{...props}
getProps={({ isCurrent }) => ({
className: isCurrent ? "Header__nav-link--active" : "Header__nav-link",})}
/>
);
const Header = () => {
return (
<header className="Header">
<div className="Header__nav">
<NavLink to="/app/A">PAGE A</NavLink>
<NavLink to="/app/B">PAGE B</NavLink>
<NavLink to="/app/C">PAGE C</NavLink>
</div>
</header>
);
};
问题
无效的链接-Header__nav-link
获得字体设置,但--active
链接却没有。通过将基类与active
一起添加到标记中,是“正确”的方法吗?
像这样:className="Header__nav-link Header__nav-link--active"
解决方法
是的,正确的方法就是您所描述的。 BEM中的修饰符旨在与块类一起使用,以便从基础上以某种方式对其进行更改。如果您考虑一下,修饰符类就不能单独存在,因为它没有已定义的修改块。