如何将顺风 css class 解析为子元素

Question

我一直在尝试做这样的事情

const Children = ({ className }) => {
    return (
        <div className={`text-blue-400 font-sans ${className}`}>Hello world</div>
    );
};

const Parent = () => {
    return (
        <div>
            <Children className='text-red-400' />
        </div>
     )
}

但是孩子们的颜色没有变成红色而是保持蓝色

预期结果：儿童颜色为红色

实际结果：孩子们仍然有蓝色

Answer 1

const variants = {
  red: 'text-red-400',
  blue: 'text-blue-400'
}

const Children = ({ variant = 'blue' }) => {
    return (
        <div className={`font-sans ${variants[variant]}`}>Hello world</div>
    );
};

const Parent = () => {
    return (
        <div>
            <Children variant='red' />
        </div>
     )
}