将数组传递给道具以创建多个框阴影

Question

我正在尝试创建一个组件，其 css 输出带有多个阴影的框阴影以创建堆叠的纸张效果。我正在尝试使用样式组件来做到这一点。将 css 传递给 prop 并没有多少乐趣。提前致谢。

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('')} />

将数组传递给道具以创建多个框阴影

Passing an array to a prop to create multiple box-shadows

reactjs

styled-components