个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在为我们的 React(使用 MaterialUI)应用程序编写一些简单的可重用组件。
问题是，我想允许这个相同的可重用组件的不同样式，由消费组件通过 Prop 定制。
这是部分代码:
import { withStyles } from '@material-ui/core';
const styles = theme => ({
image: {
maxHeight: '200px'
}
});
render() {
const classes = this.props.classes
return (
<div>
...
<img className={classes.image} src={this.state.filePreviewSrc} alt="" />
...
</div>
);
}
比方说，我想让程序员自定义 classes.image 的外观。硬编码的图像类能否以某种方式被覆盖？
使用 withStyles api 甚至是创建组件的正确方法吗？其外观可以由使用组件/程序员自定义？
最佳答案
对于如何支持样式自定义，主要有三种方法:
withStyles 进行定制对于选项3，包装组件的样式将与原始样式合并，但包装组件的CSS 类将在<head> 中稍后出现。并将赢得原作。
下面是显示所有三种方法的示例:
ReusableComponent.js
import React from "react";
import { withStyles } from "@material-ui/core/styles";
const styles = {
root: props => ({
backgroundColor: props.rootBackgroundColor
? props.rootBackgroundColor
: "green"
}),
inner: props => ({
backgroundColor: props.innerBackgroundColor
? props.innerBackgroundColor
: "red"
})
};
const ReusableComponent = ({ classes, children, suppressInnerDiv = false }) => {
return (
<div className={classes.root}>
Outer div
{suppressInnerDiv && <div>{children}</div>}
{!suppressInnerDiv && (
<div className={classes.inner}>
Inner div
<div>{children}</div>
</div>
)}
</div>
);
};
export default withStyles(styles)(ReusableComponent);
index.js
import React from "react";
import ReactDOM from "react-dom";
import { withStyles } from "@material-ui/core/styles";
import ReusableComponent from "./ReusableComponent";
const styles1 = theme => ({
root: {
backgroundColor: "lightblue",
margin: theme.spacing(2)
},
inner: {
minHeight: 100,
backgroundColor: "yellow"
}
});
const Customization1 = withStyles(styles1)(ReusableComponent);
const styles2 = {
inner: {
backgroundColor: "purple",
color: "white"
}
};
const Customization2 = withStyles(styles2)(ReusableComponent);
function App() {
return (
<div className="App">
<ReusableComponent>Not customized</ReusableComponent>
<Customization1>Customization 1 via withStyles</Customization1>
<Customization2>Customization 2 via withStyles</Customization2>
<ReusableComponent rootBackgroundColor="lightgrey" suppressInnerDiv>
Customization via props
</ReusableComponent>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
关于css - 使用 withStyles api 时，如何允许通过 props 自定义 React 组件的样式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58732498/
25
4
0
这是我的代码 import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; impo
import * as React from "react"; import Button from "@material-ui/core/Button"; import * as PropTyp
我想在 withStyles 中使用 min()。 我现在这样声明它: maxWidth: "min(700, 90vw)" 我也试过 maxWidth: "min('700', '90vw')" 这
在尝试将我的 React 应用程序转换为 typescript 时，我不断收到以下错误，而且我一直无法弄清楚它在说什么。该应用程序在纯 JS 中运行良好。我正在使用 material-ui@next
我正在尝试将仪表板的组件拆分为更小的组件。但是，所有组件都依赖于 drawerWidth。我的第一个想法是让 drawerWidth 进入状态，这样我就可以将它传递给每个组件。但是，可变样式取决于 d
例如。 Child.js //assume there is s as styles object and used in this component class Child extends Com
我有以下内容: class StyledInput extends React.Component{ styles = (color, theme) => ({ underline: {
我的 package.json 看起来像这样。该应用程序工作正常，直到不久前我突然收到此错误。 "@material-ui/icons": "1.0.0-beta.42", "chartist
如何在 material-ui/core/styles.js 中模拟 withStyles 的实现？ 这是测试: import React from 'react' import { shallow
当我将鼠标悬停在具有类 friendsListItem 的 ListItem 上时，我希望隐藏具有类操作的 ListItemSecondaryAction 元素。 我试过在样式中使用 decedent
我正在使用 material-ui withStylers 和 defaultProps 创建一个组件，但是当我尝试使用组件的 props 时，在样式对象中，我从来没有得到我的默认 props 的值，
我看了一下 this question ，但仍然设法让它发挥作用。 目的是将样式与组件文件分开，以便进行更清晰的设置。 当没有 theme 涉及时，它工作正常。 我确实尝试了几次迭代，有或没有包装 w
我正在做 react 项目，在这个项目中，我和我的同事正在使用 Material UI，出于某种原因，我想访问 DOM 节点 由 HOC 包装的另一个组件。为此，我使用了 React ref。但我只是
我的任务是让我们的 React redux 网络应用程序中的页面加载速度更快。 当加载页面的 Action 触发时，我们会看到大约 0.5 秒的小停顿。 我打开了探查器，乍一看似乎没有任何问题。 Fl
每个都有不同的用例吗？什么时候应该使用 withStyles 而不是 makeStyles？ 最佳答案 更新 此问题/答案适用于 Material-UI 的 v4。我在最后添加了一些 v5 信息/链接
我正在尝试弄清楚如何注释以下样式的类型(我从纯 JavaScript 转换为 TypeScript 并添加了类型注释): import * as React from 'react' import {
在 React with material-ui 中，我尝试创建一个 JSX 组件，它接受通用参数并使用 withStyles HOC 来注入(inject)我的样式。 第一种方法是这样的: cons
我注意到用 生成的类makeStyles 并且钩子(Hook)的使用遵循以下命名法: 而用 生成的类withStyles 和 HOC 的使用遵循这一点: 有没有办法使用 makeStyles (我喜欢
我尝试将 Material UI Dashboard 转换为 TypeScript。 https://github.com/mui-org/material-ui/blob/master/docs/s
从 v3.9.x 升级到 MUI v4.0.2 后，我收到以下错误: You must pass a component to the function returned by connect. In
我是一名优秀的程序员,十分优秀！