问题标签 [css-in-js]
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.
javascript - Material UI 如何为子组件设置外部样式，整个组件使用一种主要的通用样式
我有一个由许多子组件组成的页面。页面文件夹包含页面文件、外部样式文件和每个子组件文件夹——它们也包含它们自己的样式。
我不确定如何为所有子组件设置外部共享通用样式文件以及每个子组件的外部样式。
IE。DemoStyles.js是常用样式，Demo.js是调用子组件的位置。
Demo.js：
DemoStyles.js：
title样式未应用。
在文件className中设置Red.js：
TL;DR：我需要一个通用的外部样式文件来应用到一个文件夹中的所有子组件；每个子组件都需要自己特定的外部样式。
这是代码示例：https ://codesandbox.io/s/rypoqk07lo
已解决：我通过将 demoStyles 导入 RedStyles.js 文件，然后使用扩展运算符调用它并将主题作为参数传递来解决这个问题，如下所示：
RedStyles.js
代码示例也更新了
reactjs - 如何在情感中将道具传递给样式化的组件？使用打字稿
我在以下位置使用情感风格：
我正在尝试将道具传递给指南中提到的样式组件：
https://emotion.sh/docs/styled
由于某种原因它不起作用。我也使用 TypeScript。我在这里将 props 传递给名为 StyleWrapper 的样式化组件：
在 StyleWrapper 中：
我得到的是编译错误：
material-ui - 将 jss 类名添加到 jsx 元素数组
我希望能够做到<li className={classes.item}>。我希望每个列表项从样式对象中的项键中获取颜色属性。通常，样式对象是由访问的，withStyles(styles)但在这种情况下我该怎么做呢？
css - 部署到 netlify 后情感 css 不渲染但在本地工作
我在 netlify 上部署了一个 gatsby 站点，当查看该站点时，它不会为某些元素（我的按钮）呈现 css，但适用于其他元素，例如我的框。
当我在本地运行该站点时，它可以正常工作并呈现良好。
本地渲染：
部署后渲染：
我在 gatsby 网站上使用了情感 10。
我试过同时使用对象样式和字符串样式。相同的样式适用于我拥有的其他组件，例如使用某些相同 css 的框。
这是 css 在开发工具中的外观：
任何想法为什么会发生这种情况？
javascript - 样式化组件如何将宽度道具传递给组件
我是样式组件的新手。我想通过将道具传递给组件来设置输入宽度。预期输出应该是：
这是我的组件：
reactjs - 检查样式组件中是否存在 Prop
我刚开始使用样式化的组件，想为按钮、导航栏等创建变体。
例如，我想创建一个深色版本的导航栏（其中背景颜色会变暗，文本颜色会变浅）。
我想做的只是在组件上添加一个暗属性，如下所示：
我想这样做，而不是这样：
但是，我不确定如何执行此操作。也就是说，如何仅通过检查道具名称是否存在来设置元素的样式（不向道具传递任何值）？
有任何想法吗？提前致谢。
reactjs - 样式化组件的多个道具选项
我有一个使用 Styled Components 创建的导航栏组件。我想创建一些改变背景颜色和/或文本颜色的道具。
例如： <Navbar dark>应该有以下 CSS：
而<Navbar light>应该相反：
但是，如果两个道具都没有使用，那么我想要一个默认的背景和文本颜色——比如（出于演示目的），如下所示：
现在，我的问题是如何在 Styled Components 中进行设置。
我可以执行以下操作：
和颜色类似的东西。
但这是多余的，不是很优雅。我想要某种 if/else 语句：
但我不知道如何在 Styled Components 中设置类似的东西。
有什么建议么？
提前致谢。
javascript - 处理样式化组件中的道具组合
我正在尝试使用样式组件实现基于材料设计的按钮组件。该组件将有许多道具（例如大小、图标、浮动等）。
但是，管理所有各种道具组合变得相当困难。
例如，按钮有三种尺寸：默认、小和大。
但是小按钮的大小会根据它是普通按钮还是浮动按钮而变化。大按钮也是如此。
所以我有以下尺寸：
- 小的
- 小浮动
- 默认
- 漂浮的
- 大的
- 大型浮动
当然，我还有其他未列出的组合。
结果，我的代码开始变得有点复杂，因为我不仅要检查 prop ( ${props => { if (props.floating)...) 是否存在，还要检查该特定 prop 是否与另一个 prop ( ${props => { if (props.floating && props.small)...) 结合存在。
因此，我想知道是否有人对在处理大量组合时如何最好地组织和构造道具有任何建议？
谢谢。
javascript - 样式化组件中的多个道具检查
我知道在样式组件中，我可以检查这样的道具：
${props => { if (props.size)...return...
但是，据我所知，如果我想进行第二次道具检查，那么我需要重新开始：
${props => { if (props.color)...return...
我想知道的是，是否有一种方法可以${props...针对不同的情况只做不同的回报？
如果是这样，知道怎么做吗？
谢谢。
reactjs - 如何在 MaterialUI 4 中使用 react-jss？
我已经用react-jss了material-ui一段时间了。material-ui 3.x -> 4.x 迁移指南说 MUI 4 与 React JSS 9.x 不兼容：
https://material-ui.com/guides/migration-v3/
此外，该react-jss项目似乎已存档：
https://github.com/cssinjs/react-jss
...但 JSS 至少达到 10 版：
https://cssinjs.org/?v=v10.0.0-alpha.16
所以我对如何将 React-JSS 与 MUI 4 一起使用完全感到困惑。导入是不是"react-jss": "8.6.1",in package.json？我应该切换到情感组件还是样式组件？如此迷茫。