Как стилизовать отдельные элементы, созданные с помощью array.map, с использованием стилизованных компонентов? - PullRequest
Новая
       166

Как стилизовать отдельные элементы, созданные с помощью array.map, с использованием стилизованных компонентов?

0 голосов
/ 03 августа 2020

Цель состоит в том, чтобы иметь возможность настроить таргетинг на каждый уникальный элемент, чтобы придать ему уникальный стиль.

В моем коде рассматриваемый массив представляет собой массив объектов, и каждый dummyElement будет иметь уникальную абсолютную позицию на основе значения текущего ключа элемента, например 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>
  ))
</>

Ответы [ 3 ]

1 голос
/ 03 августа 2020

Согласно официальной документации. https://styled-components.com/ Думаю, решение приходит именно так. Попробуй и скажи, работает ли. 

/ 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>
  ))
</>
0 голосов
/ 03 августа 2020

Вы можете передать значения для стиля Dynami c через свойство id, а затем проанализировать их в компоненте стиля dummyElement следующим образом: 

// Define your dynamic styled components something like this
export const DummyElement = styled.div`
  font-size: 20px;
  padding: ${props => Number(props.id.split('-')[2])}px;
  background-color: ${props => props.id.split('-')[1]};
  color: #FBE7FD;
`;

// Then when using the DummyComponent do something like this
<DummyElement id='dummy1-coral-100' />
<DummyElement id='dummy2-indianred-50' />
<DummyElement id='dummy3-pink-20' />
0 голосов
/ 03 августа 2020

Вы можете определить свойства идентификатора для элементов с индексом, чтобы они были уникальными, и вы можете изменить стиль, получив к ним доступ. Используйте для этого обратные кавычки. 

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