如何使用样式组件为使用 array.map 创建的单个元素设置样式? [英] How to style individual elements created with array.map using styled-components?

问题描述

目标是能够定位每个独特的元素，以赋予其独特的样式.

The goal is to be able to target each unique element in order to give it unique styling.

在我的代码中，有问题的数组是一个对象数组，每个 dummyElement 都将具有基于当前项键值的唯一绝对位置，例如 curr.longitude.

In my code the array in question is an array of objects, and each dummyElement will have an unique absolute position based on a value of the current item key, such as curr.longitude.

// dummyElement.styled.js file

export const dummyElement = styled.a`
  font-size: 20px;
`; // Styles all the dummyElements, how to style them individually?



// dummyElement.JSX file 

import { dummyElement } from "./dummyElement.styled";

<>
  props.dummyArray.map((current, index) => (
    <dummyElement
      key={index}
      href={"https://dummywebsite/" + current.value}
    >
      {current.value}
    </dummyElement>
  ))
</>

推荐答案

根据官方文档.https://styled-components.com/我认为解决方案是这样的.试试看，告诉我它是否有效.

According to the official documentation. https://styled-components.com/ I think the solution comes in this way. Try it, and tell me if it works.

/ dummyElement.styled.js file

export const dummyElement = styled.a`
  font-size: 20px;
  ${ props => props.longValue === 'someLongitudeValue' && css`
    background-color: white;
  `}
  ${ props => props.longValue === 'otherLongitudeValue' && css`
    background-color: green;
  `}
`; // Styles all the dummyElements, how to style them individually?



// dummyElement.JSX file 

import { dummyElement } from "./dummyElement.styled";

<>
  props.dummyArray.map((current, index) => (
    <dummyElement
      key={index}
      href={"https://dummywebsite/" + current.value}
      longValue={current.long}
    >
      {current.value}
    </dummyElement>
  ))
</>

这篇关于如何使用样式组件为使用 array.map 创建的单个元素设置样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！