问题标签 [jss]

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 投票
1 回答
570 浏览

javascript - 如何使用 Lodash 执行和合并多个函数结果

假设我们有 2 个不同的函数(或更多),它们接受来自某个执行程序的一个参数并返回结果对象。让我举个例子:

我想执行它们并将结果对象合并为一个!在对象的情况下,这是一项微不足道的任务,例如。

预期的结果是

但是在功能的情况下,它变得有点烦人。

所以问题是。是否有可能实现我想要的?(通过 Lodash 或使用其他东西)

我决定我可能会创造类似的东西

但是这个解决方案有点丑陋,因为我应该以可能被覆盖的每一种风格来照顾这个东西。也许存在一些实用程序/助手可以帮助以更好的方式处理它?

PS 不要问我这个有趣的要求,它只是 MaterilUI 的withStyle功能,我想知道如何正确处理它。

谢谢你的帮助。

0 投票
1 回答
105 浏览

reactjs - JSS Obj - 从同一父 obj 中的另一个属性引用属性值

我有一个 position="fixed" 的 material-ui AppBar 组件,因此它作为主菜单栏粘在窗口的上边框上。这里的组件名称是“header”,它使用这个 JSS obj 设置样式。

由于主容器在 AppBar 组件下方滑动到顶部 0,因此当它的位置固定时,我需要在 AppBar 正下方将其顶部边缘以使它们连续定位。

最好,我想将 margin-top 设置为 AppBar 高度的实际值,所以我不需要手动设置它。(AppBar 的高度也会根据其内容进行调整,因此它的大小可能是可变的)

但是我不知道该怎么做,所以我必须手动设置 height/margin-top(main_container)。

至少:如何让 main_horizo​​ntal_container.marginTop 从 header.height 中获取它的值,所以我只需设置一次?

不幸的是,这不能按计划工作-“TypeError:无法读取未定义的属性'高度'”

0 投票
1 回答
494 浏览

reactjs - jss 覆盖 material-ui 非确定性类

我正在尝试为材料 textField 创建自定义样式,并且需要一个 JSS 选择器来达到不确定的类名。

样式看起来像这样:

问题是 MuiInputLabel-shrink 也是由 jss 生成的,并且具有 xxx 数字后缀。是否有任何适用于生成的类的选择器?

0 投票
1 回答
281 浏览

css - react-jss 不缓存 css 类

我使用 Mui (material ui) List 并且在 ListItem 中有一个有点复杂的自定义组件(具有其他组件 + 状态,可以折叠或展开等)。

我使用 react-jss (injectSheet(styles)(component)),我看到对于我在列表中添加的每个元素,都有一个新的 Css 注入到页眉中。我以为 react-jss 中添加了缓存,但看起来我错了。

您能否建议我如何使用 react-jss 缓存 Css?此外,如果这不是一个选项,并且我必须使用 jss + 插件,那么带有缓存插件的 jss 设置示例将有所帮助。

谢谢您的帮助!

0 投票
3 回答
2000 浏览

material-ui - 以本地 JSS 样式引用全局组件类?

我正在使用带有 react 的 material-ui,并且当标准 material-ui 组件出现在本地类中时,我想要对其进行样式化。从概念上讲,类似于:

我在 JSS 中看到如何使用$符号引用本地类,以及如何使用 覆盖/增强 material-ui 样式createTheme,但我一直无法找到有关如何完成此用例的任何信息。

0 投票
1 回答
298 浏览

material-ui - JSS 审讯

我在 JS (JSS) 中使用带有 Material-ui 的 CSS,它工作正常,但在功能/编码设施方面我没有得到它应该提供的东西(不仅仅是样式注入)。我觉得我错过了一些东西,所以我有一些具体的问题。

通过样式注入,我可以使样式适应上下文,例如:

使用 JSS,看起来我需要以不同的潜在颜色“预构建”整个按钮样式:

当只有一个参数是动态的时,有什么方法可以避免重写整个样式?

还有一点,对于 JSS,看起来我们需要为每个需要设置样式的 html 元素注入一个类。

td因此,如果我有一个包含 200 个单元格的表格,我是否应该在我的 DOM 中添加 200 个类(当我只能使用纯 CSS 中的选择器声明一次时)?

有没有办法在父组件和子组件之间使用继承样式?因为有一个肮脏的模式,我已经写了好几次来合并我从父级注入的样式和子级自己编译的样式:

0 投票
1 回答
2495 浏览

reactjs - Webpack 4 + Material-UI:JSS 的缩小如何在生产模式下工作?

我正在使用Webpack 4.10.2Material-UI v1.1.0开发一个项目。MUI 文档正在讨论类名生成器,我对缩短类名的结果感到满意,但是在构建过程中有一些我不明白的东西,我可能缺少 Webpack 模块或插件(例如,我只是使用 babel-loader 并且没有插件)。我刚刚尝试了许多与UglifyJsPlugin的组合(通过 optimization.minimizer)compressmangle但没有任何效果。

问题:

文档样式标签中注入的类名被缩短,但正文中对应的类不被缩短:

发展模式

在开发模式下构建我的项目时一切都很好,使用webpack -d

在正文中,相应的类

生产方式

当我在生产模式下构建时,样式被破坏了,我有带有缩短类名的内联样式(这很好):

在正文中,CSS 类仍然使用它们的长名称

而不是:

我缺少什么让它工作?谢谢

0 投票
4 回答
14930 浏览

css - Material-UI Input 组件下划线颜色

我正在尝试制作一个带有白色下划线的输入组件。目前,当用户将鼠标悬停在组件上时,下划线颜色会变为黑色。我希望这是白色的。我相信这应该可以通过覆盖演示中的下划线类来实现,如下所述。不幸的是,它似乎不起作用,但如果我在浏览器中手动检查样式并删除下面的行,它会在浏览器中按预期工作。

示例:https ://stackblitz.com/edit/yjpf5s (查看:https ://yjpf5s.stackblitz.io )

在浏览器中手动删除样式以获得所需的功能:

我正在使用的覆盖类样式:

编辑:这是最终工作的解决方案:

0 投票
1 回答
436 浏览

css - 为什么不使用JSS在material-ui中加载Roboto

Material-UI 使用 JSS 方式来设置其组件的样式。它是用“roboto”字体构建的。但是,为了加载这个 Roboto 字体,为什么 Material-UI 依赖于 CSS 模块,比如“typeface-roboto”?这是否与他们使用 JSS 设置组件样式和 CSS 用于字体系列的方式相矛盾?

0 投票
2 回答
4353 浏览

material-ui - material-ui / 如何使用 'withStyles()' 设置 HOC 样式?

我的 HOC:

我想使用以下方式设置“Paper”组件的样式withStyles()

在这种情况下,我如何注入类道具?我的简单想法Component => ({classes, ...props}) =>记录错误。

TypeError:无法将类作为函数调用