目标子元素样式组件

Posted

技术标签:

【中文标题】目标子元素样式组件【英文标题】:target child element styled components 【发布时间】:2018-07-20 16:07:35 【问题描述】:

我正在尝试通过将 ColorBox 元素定位为 ImgGrid 的子元素来更改 nth-child(2) 元素的背景颜色,但我似乎无法让它工作,我尝试了多种变体不同的元素,似乎没有任何效果

如果我不尝试定位 nth-child 元素,这将改变背景颜色

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  $ColorBox 
    background: #ff00ff;
  
`

如何定位ColorBox 元素的nth-child(2)

import React from 'react'
import styled from 'styled-components'
// import Img from '../../atoms/Img'
import  array, bool  from 'prop-types'

const Wrap = styled.div`
  padding: 20px 0;
`

const BoxWrap = styled.div`
  position: relative;
  border: 1px solid #000;
  height: auto;
  padding: 20px;
`

const Title = styled.div`
  position: absolute;
  display: flex;
  align-items: center;
  top: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  height: 40px;
  background: #f6f6f6;
  padding: 10px;
`

const BoxInner = styled.div`
  width: 100%;
  height: 100%;
`

const ColorBox = styled.div`
  height: 60px;
  width: 100%;
  background: #FFD700;
`

const ImgCell = styled.div`
  flex: 0 0 25%;
  padding: 5px;
`

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  &:nth-child(2) $ColorBox 
    background: #ff00ff;
  
`

const ImgCellInner = styled.div`
  position: relative;
`

// const ImgText = styled.div`
//   position: absolute;
//   bottom: 0;
//   left: 0;
//   padding: 5px;
//   width: 100%;
//   background: rgba(0,0,0,0.7);
//   color: #fff;
// `


const ImgWrap = styled.div`
  width: 100%;
`

const ColorWrap = styled.div`

`

const Filter = ( filterData, color ) => (
  <Wrap>
    <BoxWrap>
      <Title>
        For Women
      </Title>
      <BoxInner>
        <ImgGrid>
          filterData.map(filter =>
            <ImgCell>
              <ImgCellInner>
                <ImgWrap>
                  color &&
                  <ColorWrap>
                    <ColorBox />
                    filter.text
                  </ColorWrap>
                  
                </ImgWrap>
              </ImgCellInner>
            </ImgCell>,
          )
        </ImgGrid>
      </BoxInner>
    </BoxWrap>
  </Wrap>
)

/* eslint-disable*/
Filter.propTypes = 
  filterData: array,
  color: bool,


Filter.defaultProps = 
  filterData: array,
  color: bool,


export default Filter

【问题讨论】:

可以将带有某种索引的道具传递给 ColorBox 并在样式组件中访问此道具吗? 确定是否可行 【参考方案1】:

我可以假设您的代码不起作用,因为 &:nth-child(2) 表示您选择的是第二个孩子本身的 ImgGrid。尝试将 ImgCell 指定为 nth-child(2):

const ImgGrid = styled.div`
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  $ImgCell:nth-child(2) $ColorBox 
    background: #ff00ff;
  
`

我不确定范围,所以您可能需要先使用&amp;

const ImgGrid = styled.div`
      display: flex;
      flex-wrap: wrap;
      flex-direction: row;
      & $ImgCell:nth-child(2) $ColorBox 
        background: #ff00ff;
      
    `

【讨论】:

我如何在代码中的一系列 中应用相同的?我试过 const CustomTbody = styled.tbodytr:nth-child(odd)className: 'odd' @Tarun 我不太确定你的代码在做什么,因为里面的 应该是 css 而 className: 'odd' 不是。 对不起,我的错。我想在伪元素的帮助下添加类。我将 SASS 类名与样式化组件混合在一起。据我从行业专家那里了解到,主题应该与样式组件一起应用。 【参考方案2】:

如果您在寻找如何定位所有子元素时偶然发现这个问题,这里是如何;

    const ParentDiv = styled.div`
       >*  
           background: white;
           padding: 5px;
           ;
            /* ...etc */
           
           `;

【讨论】:

【参考方案3】:

我遇到了同样的问题。父元素中的:focus-within 对我有用,也可以解决您的问题。

例如:

export const Parent = styled.div`
  display: flex;
  align-items: center;
  border: 1px solid #000;

  &:focus-within 
    border: 1px solid #2ADCC6;
  
`;

export const Child = styled.input`
  flex: 1;
  border: none;
`;

文档:https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

【讨论】:

以上是关于目标子元素样式组件的主要内容,如果未能解决你的问题,请参考以下文章

如何有条件地测试样式化的组件和子元素?

有办法去掉从父级元素继承下来的 CSS 样式吗

Python Selenium - 根据样式属性单击css元素或包含子元素的文本?推特关注

vue里面父组件修改子组件样式的方法

CSS父元素的子元素样式控制另一子元素怎么实现?

js如何给目标元素的兄弟元素更改样式