Question

如何使用样式化组件为React Native中的最后一个子元素设置样式？

它不起作用：

&:last-child {
   border-bottom-width: ${normalize(1.5, true)};
   border-bottom-color: ${p => p.theme.RED};
}

下面是一个示例代码，除了最后一个孩子，我想在所有地方添加（边框底部颜色）。

export const ListItem = styled.TouchableOpacity`
  ${props =>
    props.border &&
    `
    border-bottom-width: ${normalize(1.5, true)};
    border-bottom-color: ${props.theme.UI_LIST_COLOR};
  `};

  padding: ${s(2, 14, 1)};
`;

有人可以帮助我吗？预先感谢！

Answer 1

我不确定您是否完整的设置，也不确定props对象的详细信息，但是这是一个最小的工作示例，应该为您提供实现实现工作的一些指导。

const ListItem = styled.li`
  ${props => props.border && `
    border-bottom: solid;
    border-bottom-width: 3px;
    border-bottom-color: ${props.theme.UI_LIST_COLOR};
    &:last-child {
      border-bottom-width: 6px solid;
      border-bottom-color: ${props.theme.RED};
    }
  `}
`;

function App({list}) {
  const theme = {UI_LIST_COLOR: 'blue', RED: 'red'}
  
  const listItems = list.map((item) =>
    <ListItem theme={theme} border={true} key={item}>
      {item}
    </ListItem>
  );
  
  return ( 
    <section className="todoapp">
        <ul className="todo-list">
          {listItems}
        </ul> 
    </section>
  );
}

const sampleList = ['LI 1', 'LI 2', 'LI 3', 'LI 4']
ReactDOM.render( < App list={sampleList} / > , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.1/styled-components.min.js"></script>

如何使用样式化组件为React Native中的最后一个子元素设置样式

1 个答案: