Question

我有一些使用相同样式组件渲染的组件，我想在它们之间做一些优势 -

fn main() {
    let r1 = test_result(10, 20);
    match r1 {
        Ok(value) => println!("{}", value),
        Err(error) => println!("{}", error),
    }
}

fn test_result(a1: i32, a2: i32) -> Result<i32, String> {
    if a1 > a2 {
        Ok(100)
    } else {
        Err(String::from("Error Happens!"))
    }
}

到目前为止一切顺利，

但是当其中一个人有const Item = styled.div` color: ${props => props.active ? 'red' : '#333'}; & + & { margin-top: 10px; } ` <Item active={false}/> <Item active={false}/> <Item active={false}/>有效道具时，保证金顶部缺失，我发现这是因为true和<Item active={false}/>没有相同的班级名称。< / p>

有没有办法解决这个问题？

P.S。

我刚开始使用样式组件，我也在寻找最佳实践。

Answer 1

组件应具有与使用相同mongodb://admin:password@localhost:27017/mobsters组件相同的类名。

但是关于styled-components，如果你想要所有这些，那么只需简单& + &就足够了，如果你想在中间进行，你只需指定margin-top: 10px即可是first-child, last-child。

margin: 0

演示代码框：https://codesandbox.io/s/62l02knn5r

样式组件：使用`＆amp; +＆amp;`选择器并根据道具进行调整

1 个答案: