MaterialUI 手风琴标题样式问题

编程问答 2022-12-04

问题描述

https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-7yrez?file=/src/components/app.js

我的手风琴标题的样式有问题。

我这样设置我的手风琴内容：

<Accordion 
  heading1= { <dishItem name="Döner Teller Spezial" price="13,60€"/> }
  content1= { <AccordionContent /> }
</Accordion>

但是，我的 flex-row 在我的 dishItem 组件中的样式方式（在其他地方工作没有问题，或者在 tailwindplay.com 上自行测试）似乎在手风琴标题内中断，我不知道如何修复它。

这是我的 dishItem 组件：

<div className="w-full"> 
    <div className="flex flex-row py-2 bg-white">
         <div>  
            <p className="pl-2 leading-none font-lato">{props.name}</p>
            <p className="pl-2 text-base leading-none"> { props.zusatz }
          </div>
          <p className="m-2 ml-auto place-self-center"> 24,50€</p>
      </div>
  </div>

这种将最后一个 flex 元素推送到容器末尾的方式工作正常，但不在标题内。我是使用 materialUI 的新手，如果您能帮助解决此问题，我将不胜感激。

解决方法

问题主要来自：

<AccordionSummary aria-controls="panel1a-content" id="panel1a-header">
   <Typography className={classes.heading}>{props.heading1}</Typography>
</AccordionSummary>

排版会向您的内容添加 <P> 标签，这使您无法拉伸内容。您还可以使用 Material-UI 中的 <Grid> 组件让您的生活更轻松。

查看我的沙箱：https://codesandbox.io/s/tailwindcss-react-boilerplat-forked-5yv3w?file=/src/components/Accordion.js

accordionmaterial-uireactjsreactjsreactjsreactjs