React 组件道具样式答案

【问题标题】：React component prop styleReact 组件道具样式
【发布时间】：2019-03-03 11:12:33
【问题描述】：

我正在使用 UI Materials (https://material-ui.com/demos/text-fields/) 组件，我想设置帮助文本的样式。

我试过了

pstyle = {
  "& div p": {
    textAlign: "right"
  }
}

然后将其作为style={this.pstyle} 传递，它不起作用。

有人有解决办法吗？谢谢！

更新：这是组件和它的道具：https://material-ui.com/api/text-field/ 我想要设计的是 helperText 道具

【问题讨论】：

我不相信你可以在反应样式属性中使用& 吗？我很高兴被证明是错误的！
@OliverRadini 我在这里找到了类似的东西。 4 codeburst.io/4-four-ways-to-style-react-components-ac6f323da822
我很难在您链接的文章中找到一个很好的例子。在样式化组件部分有一些类似的用途，但这与您在这里所做的有点不同
我的回复有帮助吗？
@rdarioduarte 您好，感谢您的欢迎信息。正如我们所说，我正在尝试实现css。我会及时通知你

标签： reactjs material-ui

【解决方案1】：

首先欢迎！

正如 OliverRadini 所说，您不能按照您建议的方式使用 &，这是有道理的，因为您直接针对特定元素，因此不需要开始制作复杂的选择器。

谈到你手头的任务，请记住，Material UI 库中的TextField 组件只是一个完整表单控件的包装组件，包括标签、输入和帮助文本。

请记住，使用 Material UI 组件与 Google's Material Design patterns 是一致的，所以我们的想法是坚持他们的指导方针，但是如果你想自定义，这是你可以做的，要么使用 FormHelperTextProps 作为 prop in TextField 或不使用 TextField 包装器，只需将其分解为各个部分（FormControl、InputLabel、Label、FormHelperText）

第一个选项是您想要实现的简单自定义的最简单方法。尝试类似：

你的 CSS 类

projDescHelperText: {
    textAlign: "right"
}

你的组件

<TextField
    id="project-description"
    label="Project Description"
    helperText="(0/300)"
    FormHelperTextProps={className={classes.projDescHelperText}}
    value={this.state.description}
/>

如果您有一些可以分享的代码，我将能够更好地为您量身定制回复

【讨论】：

【解决方案2】：

我认为你应该设置{ "p": { textAlign: "right" } } 而不是{ "& div p": { textAlign: "right" } }

【讨论】：

【解决方案3】：

你应该使用：

<div styles={{textAlign: 'right'}}>
 <p> 0/300</>
</div

【讨论】：

【解决方案4】：

所以我这样做了：

import { withStyles } from "@material-ui/core";
    const style = {
  smth: {
    "& p": {
        textAlign: "right !important"
      }
  }
}

<TextField
    className={classes.smth}
  />
export default withStyles(style)(CustomTextField);

目前似乎工作正常。感谢所有人的帮助和及时性，@rdarioduarte 您的解决方案对我帮助很大。非常感谢你们！

【讨论】：