Question

在React-MDL中，如何将TextField component设为<h1>标题？

其中一个参数是“风格”。用法示例：<TextField style={{width: '200px'}}/> 如何将此文本字段设置为<h1>标题的大小（以及字体和其他内容）？

我的用例：我有一个带标题的页面，我希望它们（有时）可以编辑，所以我将它们更改为<TextField>组件，但我仍然希望它们看起来与它们{{1}时的大致相同标题。

谢谢！

编辑：我倾向于使用现有的材料类/最佳实践，而不是例如创建一个新的css类来描述<h1>标头的所有属性。如果材料设计有变化怎么办我将不得不更新我写的任何这样的自定义类

Answer 1

这可能需要进行大量调整，但您首先可以使用Chrome中的Web控制台获取h1元素的有效样式表并将其应用于文本字段。

Answer 2

您可以使用浏览器工具检查网站常规AssertionError: IOError not raised的CSS设置（激活＆＃34;生成的样式＆＃34;）并在h1标记中使用这些设置。

Answer 3

当您编写css代码时，请将h1规则也可以与.h1类一起使用，并将此类应用于文本字段。

＆＃13;

input.h1 {
  font-family: inherit;
  border: none;
  background-color: transparent;
  color: inherit;
}

h1, .h1 {
  font-size: 1.4em;
  font-weight: bold;
}

＆＃13;

<h1>Headline 1</h1>
<input class="h1" type="text" value="Headline 1">

＆＃13;

Answer 4

如果您愿意使用jquery，可以使用以下代码：

<script>
$(document).ready( function() {
  $("Textfield").css( "color", $("h1").css( ["color"].toString() ) );
  $("Textfield").css( "font", $("h1").css( ["font"].toString() ) );
  $("Textfield").css( "margin", $("h1").css( ["margin"].toString() ) );
  $("Textfield").css( "padding", $("h1").css( ["padding"].toString() ) );
});
</script>

这会将Textfield的颜色/字体/边距/填充属性设置为H1的值。

这段代码只设置这4个道具，你可以为其他道具添加更多的线条，另一个解决方案是循环遍历所有H1道具并立即设置所有值＃39;这种循环的一个例子可以在这里找到： jQuery CSS plugin that returns computed style of element to pseudo clone that element?

希望这个解决方案能让你走上正轨。

如何使用css将元素设置为<h1>标题？

4 个答案: