在styled-component中使用&.class名{ float：left} 为什么浮动不生效？

Question

export const NavItem = styled.div`
        &.toleft {
            float:left;
        }

        &.toright{
            float:right;
            cursor:pointer;
        }


`;

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

float: left; 和 float: right; 是 CSS 的伪类选择器，它们用于在元素上添加或移除浮动。如果你想要在一个组件中应用这些样式，你需要使用 style 属性，并将它们作为键值对的形式传递给它。

例如：

import styled from 'styled-components';

const StyledNavItem = styled.div`
    &.toleft {
        float: left;
    }

    &.toright {
        float: right;
        cursor: pointer;
    }
`;

export default function App() {
    return (
        <div>
            <NavItem toleft>Left</NavItem>
            <NavItem toright>Right</NavItem>
        </div>
    );
}

在这个例子中，我们创建了一个名为 StyledNavItem 的组件，并在其内部为两个类分别设置了 float: left; 和 float: right;。然后我们在 JSX 中导入这个组件，并为其每个子元素添加了相应的 NavItem 元素。 这样就可以实现你的需求了。