Question

我正在使用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属性

Answer 1

我认为您应该设置#standardSQL WITH `query_result` AS ( SELECT customDimension.value AS UserID, SUM(IF(LOWER(hits_product.productbrand) LIKE "Brand 1",1,0)) AS brand_1, SUM(IF(LOWER(hits_product.productbrand) LIKE "Brand 2",1,0)) AS brand_2, SUM(IF(LOWER(hits_product.productbrand) LIKE "Brand 3",1,0)) AS brand_3, ... ... FROM `table*` AS t CROSS JOIN UNNEST (hits) AS hits CROSS JOIN UNNEST(t.customdimensions) AS customDimension CROSS JOIN UNNEST(hits.product) AS hits_product WHERE parse_DATE('%y%m%d', _table_suffix) BETWEEN DATE_SUB(CURRENT_DATE(), INTERVAL 1 day) AND DATE_SUB(CURRENT_DATE(), INTERVAL 1 day) AND customDimension.index = 2 AND hits.eventInfo.eventCategory = 'Ecommerce' AND hits.eventInfo.eventAction = 'Purchase' GROUP BY UserID LIMIT 50 ) SELECT *, ARRAY_TO_STRING(ARRAY( SELECT SPLIT(kv, ':')[OFFSET(0)] FROM UNNEST(SPLIT(REGEXP_REPLACE(TO_JSON_STRING(t), r'[{"}]', ''))) kv WHERE LOWER(SPLIT(kv, ':')[OFFSET(0)]) <> LOWER('UserID') ORDER BY CAST(SPLIT(kv, ':')[OFFSET(1)] AS INT64) DESC LIMIT 3 ), ',') top3_cat FROM `query_result` t而不是{ "p": { textAlign: "right" } }

Answer 2

您应该使用：

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

Answer 3

首先欢迎您！

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

谈论您的任务时，请记住Material UI库中的TextField组件只是用于包含标签，输入和帮助文本的完整表单控件的包装器组件。

请记住，使用Material UI组件已与Google's Material Design patterns对齐，因此其想法是遵守其准则，但是如果要自定义，则可以使用{{1} }作为FormHelperTextProps中的道具，或者不使用TextField包装器，只需将其分成几部分（FormControl，InputLabel，Label，FormHelperText）

第一个选项是最简单的定制方法，它是您想要实现的简单定制。尝试类似的东西：

您的CSS类

TextField

您的组件

projDescHelperText: {
    textAlign: "right"
}

如果您可以共享一些代码，我将能够更好地为您量身定做

Answer 4

所以我这样做是这样的：

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

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

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

React组件道具风格

4 个答案: