问题标签 [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.
reactjs - 自定义 JSS 主题会覆盖材质 UI 主题吗?
我正在使用 JSS 主题来设置我的组件的样式,但我的自定义 JSS 主题似乎覆盖了 Material UI 组件使用的 JSS 主题。我正在使用material-ui 1.0.0-beta.22
它看起来像这样:
渲染此组件时,会导致以下错误:
Material UI Dialog 组件尝试访问 props.theme.spacing.unit,但不存在这样的属性,因为整个主题已被我的自定义主题覆盖。
不确定这是一个错误还是我做错了什么?至少不应该合并 JSS 主题吗?我是否缺少一些 Material UI 主题配置?
javascript - 如何遍历 ThemeProvider HOC 中嵌套的浅层组件?
跟进Github上的问题,我有一个组件Comp
在导出时用injectSheet
from包装reactjss
。请参阅代码沙箱上的设置。
在单元测试中,我想断言该组件包含<a>
,它确实如此(参见代码和框),但无论如何测试都会失败:
我明白了Error: [undefined] Please use ThemeProvider to be able to use WithTheme
。所以我自然(也许不正确?)的反应是用ThemeProvider
:
然后我得到AssertionError: expected { length: 0 } to have a length of 1 but got 0
.
我尝试了很多方法,包括调用或额外调用dive
,但我总是会得到:find
first
shallow
Please use ThemeProvider to be able to use WithTheme
这里有什么想法吗?我对使用 React 进行单元测试有点陌生,所以如果有人能在这方面启发我,我将不胜感激;)
reactjs - 如何从组件访问自定义命名空间(react-)JSS 主题?
我正在创建一个 react/redux 应用程序,并希望利用 JSS 主题来设置我的应用程序/组件的样式。我还在使用其他使用 JSS 主题的库,例如 Material UI,因此我需要创建一个命名空间主题,如 http://cssinjs.org/react-jss?v=v8.1.0#theming中所述,以避免与其他主题。
这是否意味着我必须在要使用该主题设置样式的每个组件中导入我的命名空间主题,并将其传递给injectSheet
?IE:
这感觉非常麻烦。这是另一种方式吗?我错过了什么吗?提前致谢 :)
reactjs - 将 Material-UI 与第三方 React 组件集成
是否有任何推荐的方式来设置第三方组件的样式,例如 使用Material-UI原语(栏、按钮)的react-paginate ?有可能吗?
reactjs - 在 createMuiTheme 中访问以前的主题变量
运行材质界面 1.0.0-beta.24
我正在使用以下方法设置新主题createMuiTheme
:
如何在此处直接访问我要覆盖的主题?我想这样做,这是行不通的:
javascript - 无法读取未定义的属性“createStyleSheet”
我正在使用 jss,我想简单地将全局 css 添加到页面中。
我的代码:
我收到错误:无法读取未定义的属性“createStyleSheet”
我遵循这个例子: https ://github.com/cssinjs/examples/blob/gh-pages/plugins/jss-global/app.js
reactjs - 使用 devextreme 和材质 ui @react16 进行服务器端渲染
刷新页面(并通过我的 ssr)后,除非我浏览我的应用程序并返回它,否则似乎没有任何 css 是持续的,甚至单击一些元素。是否有任何正确执行此操作的示例?
我使用受控“反应材料 ui 网格”示例中的完全相同的代码:
https://github.com/kkotwal94/DrivingService (develop 分支) <- 其中组件在 components/demoBase 下,SSR 在 server/render/pageRender.jsx 下。我使用材料 ui 示例来说明这是如何完成的。我在Students.jsx 中使用演示网格。
这是刷新后发生的图片:
在生产模式和开发模式下,其他一切都可以正常呈现(所有其他页面)。我不知道我在这里缺少什么。看起来 jss-in-css 映射不正确。
我发现恢复到 React 16 之前的一切都重新开始工作 SSR 和什么不是,但是我不能使用 dx-react-grid 项目,因为它需要 16。有点像 wackamole,仍在调查我犯错的地方。
测试
http://transportation.kkotwal.me/ 我托管它,如果您点击登录,您可以使用 yea@yea.com 登录,密码:123,或者您可以在用户名必须是电子邮件的地方注册事情。之后,如果您导航到导航上的学生按钮(如果您在登录后单击运输跟踪器,您应该返回到根页面/视图)。您将看到 dev 极端受控网格示例。
如果您在该页面上点击刷新,您将看到所有 css 都搞砸了。如果您不确定该页面是什么: http: //transportation.kkotwal.me/students。来源在这里:https ://github.com/kkotwal94/DrivingService/tree/UpdateReact 。服务器端渲染位于https://github.com/kkotwal94/DrivingService/tree/UpdateReact/server/render。devExtreme 组件的组件在 components 文件夹中称为 DemoBase.jsx,呈现它的容器是https://github.com/kkotwal94/DrivingService/blob/UpdateReact/app/containers/students/Students.jsx。
reactjs - 如何使 Material UI TextField 与内容具有相同的宽度?
基于文档:看起来材质ui只能做fullWidth或fixed width。我希望宽度与其中的内容相同。例如,如果它是一个长 url 文本框,我希望它是 url 的长度。
javascript - 如何在 React JS 中使用 Material UI 为卡片提供背景颜色作为道具?
我接下来使用 Material UI并围绕卡片组件构建一个包装器。这允许我自定义组件。我能够扩展组件,以便卡片内的标题和图像可以作为道具发送。但是,使用 JS in CSS 技术将背景颜色注入到 classes 属性中,我无法找到将背景颜色作为道具发送的方法。
使用 JSS 技术设置的类如下:
组件如下图所示:
如何使用道具设置背景颜色?