Передача массива в опору для создания нескольких теней

Question

я пытаюсь создать компонент, чья css выводит тень блока с количеством теней для создания эффекта стопки бумаги.Я пытаюсь сделать это с помощью styled-компонентов.Не испытывая особой радости, передавая CSS к опоре.Заранее спасибо.

import React from 'react'
import styled from 'styled-components'


const shadows = []

const shadowMixin = (shadow) => {
    let i ='';
    for(i = 0; i <= shadow; i++){
    shadows.push(`${i}px ${i}px ${i % 2 ? "red" : "black" }`)
    }        
}

shadowMixin(10)

console.log([...shadows].join(','))

const Input = styled.input.attrs(({ size }) => ({
    // we can define static props
    type: "password",

    // or we can define dynamic ones
    boxShadow: size || "2px 2px black"
  }))`
box-shadow: ${props => props.boxShadow}
`



// const Wrapper = styled.div`


// `
export default() => <Input size={[...shadows].join('')} />;

Answer 1

Вы применяете тень от блока как атрибут элемента, а не как стиль.

Попробуйте вместо этого:

const Input = styled.input.attrs(() => ({
  type: "password"
}))`
  box-shadow: ${props => props.boxShadow || "2px 2px black"};
`

... и затем передайте boxShadow prop:

export default () => <Input boxShadow={[...shadows].join('')} />