- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我将 Prop 传递给按钮组件:
const StoreButton = ({ storeColor }) => {
const borderBottom = `solid 3px ${storeColor}`;
const classes = useStyles({ borderBottom });
return (
<Button variant="outlined" size="small" className={classes.button}>
Store
</ Button>
)
};
在类中使用它之前,我创建了 borderBottom
属性。我想在 makeStyles 中构建属性,但这会导致错误:
const useStyles = makeStyles(theme => ({
button: {
borderBottom: props => props.borderBottom,
// borderBottom: `solid 3px ${props => props.borderBottom}`; // function is pasted in
},
}));
如果我在 makeStyles 中构造 CSS 速记,它会创建 solid 3px solid 3px function(props){return props.borderBottom;}
。当我在 Chrome 中检查它时。因此,这种方式的样式是无效的。
有没有一种方法可以将 props 传递给 CSS 速记属性,而无需在 makeStyles 之外创建它?
最佳答案
你几乎是对的,唯一需要改变的是:
borderBottom: props => `1px solid ${props.color}`,
现在这个值是一个合适的函数。它在函数内部构造正确的字符串值。
关于javascript - 将 Prop 传递给 makeStyles 并在 Material UI 的 CSS 速记属性中使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57842091/
我正在学习 MUI,在类(class)中,讲师要求我只设计一个组件而不是整个主题。 为此,它使用 制作样式 功能和传播theme.mixins.toolbar .问题是当我这样做时,出现以下错误: T
我正在尝试为我的 React 组件添加更好的测试覆盖率,而我无法模拟的地方之一就是这个内部 export const useTabStyles = makeStyles(({ options: { c
如何将 makeStyle 类从父组件传递到子组件并将它们与子组件中的 makeStyle 类组合?例如。如下添加断点隐藏到子组件样式。 示例子组件: import React from "react
我做了一些研究,但未能找到解决方案。 我正在尝试使用 createMuiTheme 创建一个主题,并稍后在 makeStyles 中使用它来检索内部的键。 (示例中的调色板)但是,自定义主题似乎没有在
我需要知道如何在选择根时定位“元素” 这是 makeStyles: const useStyles = makeStyles(theme => ({ root:{ '&.select
尽管尝试了多种方法来为 backgroundImage 属性加载图像,但它从未出现在页面中。加载外部图像(例如来自谷歌)按预期工作。 我试过: backgroundImage: `url(${Papy
如何将 Prop 填充值传递给 makeStyles 的关键帧?我必须指定初始状态才能传递 prop 吗? 它适用于颜色但不适用于填充值。 ---Child component const useSt
我正在尝试使用 覆盖 Stepper 组件中的伪类makeStyles : const useStyles = makeStyles((theme) => ({ active: { col
我在一个代码库中工作,随着时间的推移,我们对我们的页面和组件进行了许多更改,因此导致了许多现在没有使用的样式。我们想清理我们的代码库并删除所有未使用的 makeStyles 属性。 我们的样式是从一个
我想知道是否可以使用 MakesStyles 仅将样式应用于子元素,例如在普通的 HTML/CSS 项目中: Title! .parent h1 { color: #f00; } 这将为
我正在尝试处理多个 className(s) 以自定义 HTML 元素的样式,但我不明白如何复制这种情况 .class1.class2 (css) 与 makeStyle react 的方法。 情况很
我正在从事一个需要以下 CSS 代码的元素。 .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px;
我正在从事一个需要以下 CSS 代码的元素。 .hexagon, .hexagon::before, .hexagon::after { width: 67px; height: 116px;
这个问题在这里已经有了答案: Material-UI withStyles doesn't apply any kind of styles (1 个回答) 关闭 3 年前。 当我使用 withSt
我有这个风格 background: "-moz-linear-gradient(180deg, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 66%,
我刚刚更新到 5.0.0-alpha.25(来自 5.0.0-alpha.10),现在 makeStyles 无法正常工作。我在与它相关的重大更改中找不到任何内容,所以我想知道它是否是一个错误。检查元
我在 CSS/样式方面做得很差,希望能得到一些帮助 我试图根据屏幕宽度更改某些卡片的高度。使用 let mainContainerHeight = window.innerWidth
我需要在 makeStyles 内的多个样式中传播通用样式。这适用于我的 jsx,但是当我移动到 tsx 时会出错。 const abc = { fontWeight: 600, te
这个问题已经有答案了: Internal implementation of "makeStyles" in React Material-UI? (2 个回答) 已关闭 1 年前。 我刚刚开始学习
在 Material-UI ,有 makeStyles 函数可用于获取自定义 CSS 样式。 如果我没有在该特定 CSS 中使用主题,我应该使用它吗? 例如: import React from "r
我是一名优秀的程序员,十分优秀!