问题标签 [react-with-styles]

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 回答
397 浏览

javascript - 在 React Native 中使用 Airbnb 的“react-with-styles”

有没有人有一个清楚的例子说明如何在 React Native 项目中使用react-with-styles(使用react-with-styles-interface-react-native )?他们的 GitHub 页面中提供的唯一示例是针对 React 项目的。

0 投票
1 回答
1206 浏览

reactjs - 如何使用带有 react-dates 的自定义主题?

我正在尝试使用react-with-stylesAphrodite在 Typescript 中设置我的样式。我正在使用此代码,模拟来自https://github.com/airbnb/react-dates#interfaces的代码:react-dates DayPickerRangeController

但是,当我运行它时,我在控制台中收到此运行时错误:

在以下情况下我没有收到此错误:

  1. 我使用registerInterfaceWithDefaultTheme类中的函数(但这不允许我设置组件的样式)。(这让我感到惊讶,因为其中的代码registerInterfaceWithDefaultTheme看起来与我所拥有的相同(至少对我而言))

    /li>
  2. 我使用import 'react-dates/initialize';(最终调用registerInterfaceWithDefaultTheme)。

在以下情况下我仍然会收到此错误:

  1. 我交换了注册主题和界面的顺序
  2. ThemedStyleSheet我在文件顶部添加代码src/index,而不是在与使用的文件相同的文件中DayPickerRangeController(这是https://stackoverflow.com/a/48558841/1176156中的建议修复)
  3. 我将来自https://github.com/airbnb/react-dates#interfaces的确切代码放入 Javascript 中,然后将其导入我正在使用的 Typescript 文件中DayPickerRangeController

我已经在调试器中确认我所有的导入都得到了有效的代码,而不是例如undefined.

0 投票
0 回答
270 浏览

javascript - React Material-UI:通过按钮(在更高级别)打开对话框,createRef 无法使用'withMobileDialog'

在我的演示https://codesandbox.io/s/zq833pq6o3 中,您可以通过两种不同的方式打开一个对话框(子对话框)。

  1. 通过此对话框中的按钮(按钮:打开)
  2. 通过父级别的按钮(按钮:OPEN BY REF)

但同样的情况不适用于我在 App-Bar 中的 Login-Dialog。两种情况之间的区别是我正在使用

在我的登录对话框中

  1. 按钮:LOGIN => 正在工作并打开登录对话框
  2. 按钮:LOGIN REF => 不起作用,我收到错误:

    TypeError _this.dialogRef.current.handleClickOpen 不是函数

我该如何解决参考问题?通过更改导出命令?

同样的问题也是通过使用

export default withStyles(styles)(LoginForm); // instead of: export default LoginForm;

谢谢!

0 投票
1 回答
104 浏览

javascript - react.js 组件创建时如何设置样式?

react.js 组件创建时如何设置样式?

下面是我的一些代码(部分继承自更强大的开发人员,然后为简洁起见进行了简化)。

我想重新使用我的 LogComponent 来打印几页日志。但是,在某些情况下,我想在返回的列表上强制一个特定的宽度,而不是让它在它认为合适的时候弯曲。

我宁愿不定义单独的 LogComponentFixed 或if (...) {return (...)} else {return(...)}在我的 LogComponent 中有一个。

我想在 Log.js 中做一些事情,比如:

然后,在 LogComponent 中执行以下操作:

我也尝试使用类似的东西

但是我尝试过的所有方法都不起作用...

日志.js

日志组件.js

0 投票
1 回答
312 浏览

javascript - 我可以将样式应用于文件中定义的第一个类以外的类吗?

我继承了一些代码并且一直在操作它,但是我遇到了一些让我摸不着头脑的东西。

我不确定我遇到的问题是否与 react.js 或更普遍地与 CSS / javascript 相关...

在这段代码中,我们使用了 react.js withStyles。

我已经设置了一个沙箱来演示。

在文件中的第一件事,我们定义了一些可以应用于页面元素的样式,例如

然后,当我们定义一个类时,我们可以通过执行 a 来访问这些样式const { classes } = this.props,例如

这一切都很好并且有效。我尝试的是在同一个文件中定义第二个类,然后我从第一个类中调用它(在组件中创建一个组件)。

但是,const { classes } = this.props似乎无法访问顶部定义的样式,当我尝试className={classes.buttonGroup}在第二类中设置时,出现错误

我很确定我可以通过像往常一样在单独的文件中简单地定义第二个类来克服这个问题,但我想了解为什么这不起作用。

0 投票
2 回答
2582 浏览

javascript - 如何访问 withStyle 组件内的 DOM 节点?

我正在研究react项目,在这个项目中,我和我的同事正在使用Material UI,出于某种原因,我想访问DOM node另一个由HOC. 我ref为此使用了反应。但我只是得到了withStyle对象,见下文:

这是我的TableHead

Table组件中我想计算组件的高度TableHead,所以我使用下面的代码:

和组件 I的内部componentDidMount,如下所示:Tableconsole.log(this.header)

在此处输入图像描述

我在网上寻找并找到一些GitHub问题页面并尝试innerRef代替,ref但这对我没有帮助。

如何访问 DOM 节点以计算其高度?

0 投票
1 回答
2384 浏览

reactjs - 如何使用 withStyles 返回一个反应组件?

这里的问题不是关于如何导出,而是如何返回一个注入了 css 的 React 对象?

我正在尝试实现类似的目标:

其目的是返回Component并使用withStyles设置所有 CSS 并将其样式注入名为style的属性中。

0 投票
0 回答
94 浏览

reactjs - React:要重用的材料 ui 样式按钮不适应样式

我尝试使用材质 ui 创建一个自定义样式的按钮,以便在我的项目的其他文件中重用。不知何故,按钮不适应我定义的样式。有人可以告诉我我在哪里犯了错误/忘记了什么吗?

0 投票
1 回答
3840 浏览

javascript - 在 JS 代码中编写 CSS 以从 TextField 中删除箭头按钮

我正在使用 React 和 Material-UI 构建一个网页。我有一个 TextField 元素,我想删除箭头按钮 - 如果我使用 CSS,我将使用以下代码:

但我想在我使用的 JS 中使用 CSS 来设置页面样式export default withStyles(styles)(FormPersonalDetails)。我该怎么做呢?`

渲染()函数:

0 投票
1 回答
203 浏览

javascript - 使用 refs reactJS WithStyles 调用嵌套子方法

我正在尝试使用 refs 访问嵌套的冷组件中的方法。这是为了删除嵌套删除组件中的数据。我的代码如下(简化代码):

家长班:

儿童班:

孙子班:

但是,我无法获得 supprimer 方法来调用 GrandChild 的 this 上下文中的更改。该方法被调用,但是以一种奇怪的方式。

它在组件加载并打印索引时被调用一次,但它不起作用 onlick !!!我什至没有在 grandChild 类中调用这个方法。请帮忙。

更新:除了方法名称之外,代码与编写的完全相同。