个人中心
gpt4 book ai didi

Why is the Material UI's default theme not being stylized at all?(为什么材质用户界面的默认主题根本没有被风格化？)

转载 作者：bug小助手 更新时间：2023-10-24 19:43:40 26 4
gpt4 key购买 nike



I've tried both Carbon Design for React (@carbon/react) and Material UI (@mui/material) with Next.js and the components are not stylized correctly. They work basically, but I noticed subtle and very notable issues. I decided to forget about IBM's Carbon and am noticing this with @mui:

我已经用Next.js尝试了用于Reaction(@Carbon/Reaction)的Carbon Design(@Carbon/Reaction)和材质UI(@Mui/Material)，但组件的样式设置不正确。它们基本上是有效的，但我注意到了一些微妙而非常值得注意的问题。我决定忘掉IBM的碳排放，在@Mui上注意到了这一点：



  • CardHeader is not showing

  • Typography and button text colors are black, but I've specified the theme provider to use the dark mode.

  • My Sig In button has variant="contained", but its contained style does not apply.


This is the code:

代码是这样的：


'use client';

import { useState } from 'react';
import Image from 'next/image'
import { Box, Container, Card, CardHeader, CardContent, TextField, Typography, Button } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const darkTheme = createTheme({
  palette: {
    mode: 'dark',
  },
});

export default function Home() {
  const [auth, setAuth] = useState<void>(undefined);
  return (
    <ThemeProvider theme={darkTheme}>
      <CssBaseline/>
      <main className="flex flex-col items-center justify-center w-full h-full">
        <Container>
          <Box>
            {auth == null ? <SigIn setAuth={setAuth}/> : null}
          </Box>
        </Container>
      </main>
    </ThemeProvider>
  )
}

type SigInProps = {
  setAuth: (auth: void) => void,
};

function SigIn({setAuth}: SigInProps) {
  return (
    <Card>
      <CardHeader>
        <Typography variant="subtitle1">Subtitle</Typography>
      </CardHeader>
      <CardContent>
        <div className="flex flex-col gap-4">
          <TextField required id="username" label="Username"/>
          <TextField required id="password" type="password" label="Password" autoComplete="current-password"/>
          <Button variant="contained">Sig in</Button>
        </div>
      </CardContent>
    </Card>
  );
}

Result:

结果：


Picture


I've posted the issue at GitHub also: https://github.com/mui/material-ui/issues/38901

我也在GitHub上发布了这个问题：https://github.com/mui/material-ui/issues/38901


更多回答
优秀答案推荐

The issue is your implementation of Tailwind with MUI. Your app's usage of Tailwind's CSS preflight style should be replaced with CSSBaseline. Tailwind base is adding styles that conflict with MUI. (For example, the button color.) You can see the issue partly resolve when you comment out the first line of your globals.css file (@tailwind base;).

问题是您在MUI中实现了TailWind。你的应用程序对TailWind的CSS印前检查样式的使用应该替换为CSSBaseline。顺风基础正在添加与MUI冲突的样式。(例如，按钮颜色。)当您注释掉global als.css文件的第一行时，您可以看到问题在一定程度上得到了解决(@tawind base；)。


From the MUI Tailwind CSS docs:

从MUI TailWind CSS文档：




  1. Add Tailwind CSS to your project, following the instructions in
    https://tailwindcss.com/docs/installation.

  2. Remove Tailwind CSS's
    preflight     style so it can use the Material UI's preflight instead
    (CssBaseline).



From the sound if it, my assumption is that you had a similar issue with Carbon, but I haven't seen your implementation of that.

从声音上看，我的假设是你在碳排放方面也有类似的问题，但我还没有看到你实施了这一点。


更多回答

26 4 0
文章推荐： How can i find the corodinates of a point in python's "Turtle" library?(如何在Python的“Turtle”库中找到点的坐标？)
文章推荐： VS Code Remote SSH Connection not working(VS代码远程SSH连接不起作用)
文章推荐： How to write dataframe on s3 bucket by pyspark but without using Hadoop(如何在S3存储桶上不使用Hadoop的情况下使用PYSPARK写入数据帧)
文章推荐： Querying Notion database with formula field returns incorrect formula results(使用公式字段查询概念数据库返回错误的公式结果)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com