MUI v5 + React styleguidist + ScopedCSSBaseline + createTheme styleOverrides: body fontSize更改不起作用
MUI v5是一个流行的React UI组件库，用于构建用户界面。React Styleguidist是一个用于编写和展示React组件文档的工具。ScopedCSSBaseline是MUI v5中的一个组件，用于提供基本的CSS重置和全局样式。createTheme是MUI v5中的一个函数，用于创建自定义的主题样式。
针对你提到的问题，如果在使用MUI v5时，修改了主题样式中的body fontSize，但没有生效，可能有以下几个原因：
- 优先级问题：可能其他样式规则的优先级更高，导致你的修改被覆盖。你可以尝试使用更具体的选择器或者提高样式规则的优先级来解决这个问题。
- 样式覆盖问题：MUI v5提供了styleOverrides属性，可以用于覆盖组件的默认样式。你可以检查是否正确使用了styleOverrides来修改body的fontSize。
- 缓存问题：如果你使用了浏览器的缓存功能，可能需要清除缓存才能看到样式的变化。你可以尝试在开发者工具中禁用缓存或者使用无痕模式来测试。
关于MUI v5和React Styleguidist的更多信息，你可以参考以下链接：
- MUI v5官方文档：https://mui.com/
- React Styleguidist官方文档：https://react-styleguidist.js.org/
请注意，以上回答仅供参考，具体解决方法可能需要根据具体情况进行调试和调整。
相关·内容
1回答
我已经将两个基于MUI的UI vom MUI v4迁移到了v5，它们的body fontSize都被覆盖了，正如MUI迁移指南中所解释的:这是为了让v4设计决定默认使用Typography body2现在，我还想在我的Styleguidist组件样式指南中确保适当的MUI v4字体大小默认值。/MuiThemeWrapper.tsx')
}, 包装器基本上是这样做的： const appTheme = cr
浏览 85提问于2021-10-15得票数 0
回答已采纳
我知道我能做到 MuiInput: { root: { lineHeight: '25px' }但我想找个办法把它映射成“body2” variant: 'body</
浏览 8提问于2022-09-30得票数 0
1回答
在MUI中有一个示例： components: { MuiButton: {styleOverrides: { root: { },
浏览 1提问于2021-10-31得票数 3
回答已采纳
3回答
我的第一个问题是，我无法正确地加载字体，也根本无法更改typography。此外，使用MUI 5.0，我无法将此自定义字体应用到整个正文部分。我用Mui 4.0进行的全局覆盖在第5版中不再起作用了，我很生气，因为MUI 5.0 documentation没有很好地解释这一点，我已经在那里坐了好几个小时了。 // overflow: &#
浏览 4提问于2022-03-23得票数 6
当我尝试MUI官方指令时，这个问题就出现了。在文件newTheme.ts中，自定义主颜色，并添加新的变体类型post
palette: { main: "#f00" // red },
// uncomment
浏览 9提问于2022-08-20得票数 1
在下面的图片中，您可以看到body组件没有为应用程序“捕获”整个组件，还请查看devtools中的身体道具，backgroundColor和颜色(添加用于测试)与我添加到代码below.ComponentMainTheme是这样构建的： MuiCssBaseline: { '@global': { fontSize: &#
浏览 1提问于2022-03-14得票数 1
回答已采纳
1回答
我不确定如何从Checkbox 中提取字段，因为我们没有在HTML.中指定它import { createTheme, ThemeProvider'@mui/material/Checkbox';
import { createTheme, ThemeProvider, styled } from '@mui/material/sty
浏览 8提问于2022-01-30得票数 3
4回答
如何调整MUI工具提示字体大小？
、、、、
我用MUI实现了一个工具提示，但是fontSize太小了。而且我不能用.scss来改变它。import ".from '@material-ui/icons/Info';
const InfoTooltip: React.FC<div c
浏览 0提问于2020-03-30得票数 8
回答已采纳
我不能在TextField材质UI组件中更改字体颜色.我尝试使用createTheme()来完成它，当我在代码沙箱中添加'& ..MuiOutlinedInput input‘类时，字体颜色会发生适当的变化，但是当我将它应用到应用程序代码时，它就不起作用了。执行情况如下：components: { styleOverrides: {MuiOutlinedInput-n
浏览 11提问于2022-02-08得票数 1
2回答
const themeLight = createTheme({ background: { fontWeight: 600 , }, { } body3:
浏览 7提问于2022-06-27得票数 0
1回答
我正在使用MUI的ThemeProvider并创建了一个Themes.js文件。在该文件中，我为我的全局样式定义了globalTheme，比如类型和边框半径。这在CodeSandbox中有效，但在VSCode中不起作用。当我保存时，我得到一个错误"TypeError:无效的试图传播不可迭代的实例“，请参见下面的图像。import { createTheme } from "@mui/material";
// global theme style
浏览 0提问于2022-07-04得票数 2
回答已采纳
目前，我正在开发一个由NEXT JS和MUI 5最新版本以及使用GraphQL构建的Web应用程序。，我被这一点堆砌在一起：
import { createContext, useMemo, useState } from 'react'
import { createTheme, ThemeProvider} from '@mui
浏览 8提问于2021-11-14得票数 1
2回答
在v5中，尝试创建一个从黑暗模式切换到光模式的Toggle是相当困难的。import CssBaseline from '@mui/material/CssBaseline'dark&#x
浏览 31提问于2022-02-12得票数 0
回答已采纳
7回答
MUI中有反应的排版吗？
、、、
MUI是否有一种机制来使排版响应？
我看到默认的主题是在rems中定义字体大小--这是否意味着只是缩小基本字体大小的问题呢？(这似乎不起作用，如果你想以不同的速度减少标题字体，该怎么办)。
浏览 4提问于2018-09-24得票数 41
回答已采纳
1回答
Home.jsximport { ThemeProvider, createTheme } from '@mui/material/styles'@mui/material'; &l
浏览 3提问于2022-01-19得票数 0
回答已采纳
3回答
我已经成功地在我的Autocomplete中调整了TextField的字体大小。问题是我还想调整下拉菜单的字体大小。我该怎么做呢？ Codesandbox是here。 <Autocomplete value={selectedOption ?? ""} options={options}
getOptionLabel={(option) => option
浏览 212提问于2021-11-05得票数 1
回答已采纳
我正在从Mui4升级到5的过程中。</ThemeProvider> document.getElementById('root'),}createTheme: { fontSize: '10px', }, },但<e
浏览 0提问于2021-11-25得票数 0
6回答
color支柱只能接受三个值(缺省值、主值、次值)，但是如果我希望我的收音机是绿色的呢？const styles = theme => ({ colorPrimary: { color: 'blue' }, } 然后在组件内部： classes={{root: classes.formControlLabelRo
浏览 0提问于2018-06-11得票数 15
回答已采纳
4回答
<MuiButton variant="outlined">Mui Button</MuiButton> // works
<Button variant="outlined">Button</Button
浏览 14提问于2021-02-16得票数 7
回答已采纳
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
腾讯云开发者
