reactjs React顺风，无法将顺风css从父级传递到子级

fcipmucu 于 2023-01-25 发布在 React

关注(0)|答案(4)|浏览(185)

我遇到了一个简单的问题，似乎没有一个快速谷歌搜索或顺风文件的答案。
我是一个Vuejs用户，但我已经开始学习React。我选择使用TailwindCSS来测试我的React应用程序，但我注意到Vuejs和React之间在TailwindCSS的使用上有一些不同。
在Vue中，我可以通过父组件控制子组件，如下所示：

Parent component:
<template>
 <div class="w-screen">
  <ChildComponent class="w-1/2 mx-auto" />
 </div>
</template>

子组件能够通过上述父组件在屏幕上居中，就像在ChildComponent的类中一样。
然而，当我尝试在React中这样做时：

Parent component:
import Homepage from './views/Homepage';

function App() {
  return (
    <div className='bg-black w-screen'>
      <Homepage className="w-1/2 mx-auto"/>
    </div>
  );
}

export default App;

当我将CSS从父组件放置到Homepage子组件时，没有发生任何事情。
我肯定有一个简单的答案，但我不打算搜索文档或使用任何关键字来找到这个问题。有人得到提示或确认这是在React的意图或我做了什么错误的安装？

reactjs

来源：https://stackoverflow.com/questions/70835326/react-tailwind-cannot-pass-tailwind-css-from-parent-to-child

4条答案

按热度按时间

uwopmtnx1#

这不是一个顺风问题，而是一个React问题。如果不将className作为一个 prop 传递，就不能在Homepage组件上使用className。在您的情况下，Homepage不需要任何className。因此，在制作主页组件时，您必须提供一个名为“className”的属性，这样它才能正常工作。或者如果你只是简单地用div代替主页，它也会正常工作。看看这个codesandbox link

赞(0）回复(0）举报 2023-01-25

llew8vvj2#

您需要考虑到<Homepage/>是一个React组件，不能像这样接受HTMLAttrs。此示例可能会清除它：

const app = () => {
    <div className="bg-black">
        <Homepage className="bg-red" />
    </div>
}

const homePage = (props) => {
    <div className={props.className}>
        <h1 className="bg-red">hi</h1>
    </div>
}

传递给<Homepage/>的className实际上是一个props而不是Html属性。

赞(0）回复(0）举报 2023-01-25

xxhby3vn3#

在Vue中，这是相当简单的，但在react中，您需要显式地在组件中使用className

// Creating component
const Button = ({ className, children }) => {
  return <button className={`${className} bg-red-500`}>{children}</button>
}

export default Button

// Using component
<Button className="text-white">MyButton</Button>

赞(0）回复(0）举报 2023-01-25

eit6fx6z4#

import Homepage from './views/Homepage';

function App() {
  return (
    <div className='bg-black w-screen'>
      <Homepage className="w-1/2 mx-auto"/>
    </div>
  );
}

export default App;

views/Homepage您必须接收将作为className传递的 prop

const homePage = ({className}) => {
        <div className={className}>
            <h1 className="bg-red">hi</h1>
        </div>
    }
    export default homePage

然后导出组件

赞(0）回复(0）举报 2023-01-25

我来回答

reactjs React顺风，无法将顺风css从父级传递到子级

4条答案

相关问题

热门标签

最新问答