目标子元素样式组件
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;
`
我不确定范围,所以您可能需要先使用&
:
const ImgGrid = styled.div`
display: flex;
flex-wrap: wrap;
flex-direction: row;
& $ImgCell:nth-child(2) $ColorBox
background: #ff00ff;
`
【讨论】:
我如何在代码中的一系列tr:nth-child(odd)className: 'odd'
@Tarun 我不太确定你的代码在做什么,因为里面的 应该是 css 而 className: 'odd' 不是。
对不起,我的错。我想在伪元素的帮助下添加类。我将 SASS 类名与样式化组件混合在一起。据我从行业专家那里了解到,主题应该与样式组件一起应用。
如果您在寻找如何定位所有子元素时偶然发现这个问题,这里是如何;
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
【讨论】:
以上是关于目标子元素样式组件的主要内容,如果未能解决你的问题,请参考以下文章