颜色不是从道具渲染的

Question

因此，我将 props 传递到我的 JSX 组件，然后将该 props 设置为从黑色到该 prop 的渐变。但是每当我尝试这个时，渐变最终会从黑色变为透明背景。

import React from 'react'

import Color from './color'

const App = () => {
    return (
        <div className="h-screen w-screen">
            <Color color="red-400" />
        </div>
    )
}

export default App

import React from 'react'

const color = props => {


    return (
        <div className="h-screen w-screen">
            <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 to-${props.color}`}>
                {props.text}
            </div>
        </div>
    )
}

export default color

我该怎么办？

Answer 1

Tailwind 静态扫描您的文件。它不能插入字符串。所以每当你传递 class 时，你就传递了整个事情。 'to-red-500' 而不是 `to-${'red-500'}`

以下更改应该可以使它起作用（可能应该将道具名称从 color 更新为 tocolor）：

import React from 'react'

import Color from './color'

const App = () => {
    return (
        <div className="h-screen w-screen">
            <Color color="to-red-400" />
        </div>
    )
}

export default App

import React from 'react'

const color = props => {


    return (
        <div className="h-screen w-screen">
            <div className={`h-full w-full absolute bg-gradient-to-r from-cyan-500 ${props.color}`}>
                {props.text}
            </div>
        </div>
    )
}

export default color

颜色不是从道具渲染的

Color not rendering from props

javascript

reactjs

react-native

tailwind-css

react-props