Question

im试图创建一个组件，该组件的css输出带有多个阴影的盒子阴影以创建堆叠的纸张效果。我正在尝试使用样式组件。将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 道具：

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

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

1 个答案: