问题标签 [react-with-styles]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
1208 浏览

javascript - React withStyles 使用“方向”时抛出错误

我有一个简单的 React 网站,并且正在使用 withStyles 功能将样式传递给 material-ui Grid 元素。尝试direction: "column"在样式中使用时,我收到下面包含的错误消息。

这是一个 .jsx 文件。我通过指定类型找到了解决方法,但这仅适用于 TypeScript。

这是 App.jsx 文件:

我收到的错误消息是这样的:

感谢您的任何帮助。

0 投票
3 回答
942 浏览

reactjs - 如何在材质 UI 中使用 withStyles 覆盖引导类

我想覆盖一些引导类。目前我正在使用材质 UI 的 withStyles 我可以为我自己的类编写 Js 格式的 css。但是我想覆盖一些按钮、容器等的引导类......在材料中UI 它将动态生成类名。我可以使用 scss,但我在我的应用程序中使用主题转换器。

我除了使用材质 UI 的 withStyles 覆盖引导类。

0 投票
1 回答
971 浏览

css - 如何使用 Material UI withStyle 为 css 类应用样式。WithStyle 不工作

这是我的代码

我正在为网格使用非材质 ui 组件我想通过 Material UI withstyle 和主题应用样式,所以我为我的父 div 添加了 withStyle,我想为子 div 和子 CSS 类应用样式。

0 投票
1 回答
1475 浏览

reactjs - 使用 withStyles 和 withTranslation HOC 包装 React 组件后,Typescript 显示错误

我正在尝试使用 Typescript和withStylesfrom编写一个 React 组件。这两个包装器都是 HOC。@material-ui/corewithTranslationreact-i18next

Typescript 抱怨关于类型的错误。

由于某种原因,这条线不起作用:

但是,如果我只使用 withStyles 或只使用 withTranslation 它可以完美地工作:

我知道类型、接口存在问题,或者以这种方式导出我的组件可能有问题。withRouter和 一起使用时遇到了同样的问题withStyles。我通过更改它们在导出行中的顺序解决了错误!(不明白为什么它被解决了 TBH)我看到了一些建议将整个组件包装在下面的解决方案,withStyles但它对我来说似乎很难看。有什么建议吗?

这是错误:

这是我的组件:

0 投票
0 回答
520 浏览

javascript - 如何在我的 JSS 样式反应组件之间保持一致的类名?

我有一个带有 jss 样式的组件“Box”。样式化后,它会被赋予一个生成的类名,通常类似于“box-16”。我有另一个组件“BoxStack”,其中包含组件。当我使用 jss 设置样式时,我有一些规则来影响其中的组件,但是这些样式正在搜索不同的 className,然后是 's 的名称。

盒子类

转换后的css:

在此处输入图像描述

BoxStack 类的示例代码,在仪表板中查找子框

示例脚本查找 Box 组件,但查找错误的 className

在此处输入图像描述

我只想知道如何确保类保持一致的名称,以便可以从父组件的 jss 中找到子组件。

0 投票
0 回答
153 浏览

javascript - 如何使用来自单独的 JSS 样式组件的 React Context 值?

我已将我的 react jss 样式移至另一个文件。现在我使用 React 上下文来切换thememode. 我想在thememode从 true 切换到 false 时更改样式,反之亦然。

但由于我的组件样式在一个新文件上,我无法useContext从那里访问。它说不能useContext在 React 函数之外使用。所以当改变时我不能改变样式和颜色thememode

有什么方法可以获取thememode或访问上下文的值?

我尝试过的:

我尝试将thememode其作为道具放入 withStyles(styles(thememode))(Mycomponent),但我什至无法访问我使用 usecontext 获取值thememode的函数之外的常量。thememode

0 投票
1 回答
975 浏览

reactjs - React Material UI - Override using withStyles

I am working on a project and leverage React Material UI and need to override the Select component's border bottom color on the focused state. Here is what I'm using right now

I'm able to override the font size, however, the borderBottomColor is not registering. Any thoughts?

0 投票
1 回答
552 浏览

css - 如何更改禁用的TextField Material UI React js的字体颜色

我正在尝试更改禁用的 TextField 字体颜色,并在 stackoverflow 中关注了有关它的相关问题,但是当我创建如下所示的新 TextField 时,它不起作用并且什么也没有显示。

它显示 TextField “famil”,但不显示 myTextField “nam”

0 投票
0 回答
445 浏览

reactjs - 带有样式的材质 UI

错误图片再会!

在使用 Material UI 的 withStyles 钩子为组件添加自定义样式时,你们有没有遇到过这种情况。

这是我的 package.json:

这是 App.js 代码

这是登录页面的代码:

根据检查文档,我做的一切都是正确的,但我被错误阻止了

0 投票
2 回答
437 浏览

javascript - withSyles HOC 在通过 React.forwardRef 时不会将 innerRef 与其他道具一起传递

我将使用的 ref 传递React.forwardRef给通常有效的向下组件。

但是,当我使用带有样式的 HOC(高阶组件)时,innerRef 以及其他道具无法正确传递。

不使用 withStyles 我可以完美地得到它们

我怎样才能仍然拥有 withStyles HOC 但包含 innerRef 和其他道具?

从材料 ui v3 迁移到 v4 后出现此问题。NavLink 需要 innerRef 属性。