MaterialUI 手风琴标题样式问题

Question

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>

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

Answer 1

问题主要来自：

<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

MaterialUI 手风琴标题样式问题

Problems styling MaterialUI Accordion heading

css

accordion

reactjs

material-ui