0

In React-MDL, how can I style a TextField component as a <h1> title?

One of its parameters is "style". Example usage: <TextField style={{width: '200px'}}/> How can I make this text field be in the size (and font and whatever) of a <h1> title?

My use case: I have a page with headers and I want them to (sometimes) be editable, so I'm changing them into <TextField> components, but I still want them to look mostly the same as they did when they were <h1> headers.

Thanks!

Edit: I have a preference for using existing material classes/best-practices instead of, for example, making a new css class describing all the properties of a <h1> header. What if material design changes? I'll have to update any such custom class that I wrote

Hibuki
  • 544
  • 3
  • 14

4 Answers4

2

You can check the CSS settings of a regular h1 of your website using the browser tools (activate "generated styles") and use these in a style tag.

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • This would work, thanks. Is there a way to accomplish the same result without specifying all the properties of an h1 header? If for example material change their design, I prefer not to have code that I need to maintain and update. (I edited the question too) – Hibuki Jul 17 '17 at 11:22
  • No, I don't think so. As t.niese wrote, you could add an `.h1` class to your regular `h1` tag rule, but that only applies if you set up the stylesheet yourself, and you are talking about reacting to external changes, so - no... – Johannes Jul 17 '17 at 12:47
1

This might require a lot of tweaking but you as a start you can use the web console in Chrome to get the effective stylesheet of an h1 element and apply that to the textfield.

fhossfel
  • 2,041
  • 16
  • 24
  • This would work, thanks. Is there a way to accomplish the same result without specifying all the properties of an h1 header? If for example material change their design, I prefer not to have code that I need to maintain and update. (I edited the question too) – Hibuki Jul 17 '17 at 11:22
1

When you write your css code write it in a way that your h1 rules can can also be use with .h1 class, and apply this class to your textfield.

input.h1 {
  font-family: inherit;
  border: none;
  background-color: transparent;
  color: inherit;
}

h1, .h1 {
  font-size: 1.4em;
  font-weight: bold;
}
<h1>Headline 1</h1>
<input class="h1" type="text" value="Headline 1">
t.niese
  • 39,256
  • 9
  • 74
  • 101
  • This would work, thanks. Is there a way to accomplish the same result without specifying all the properties of an h1 header? If for example material change their design, I prefer not to have code that I need to maintain and update. (I edited the question too) – Hibuki Jul 17 '17 at 11:22
  • @Hibuki The [material](https://github.com/google/material-design-lite) style exists as scss, so you could keep the `.h1` classes in sync without the need to specify the properties by hand. – t.niese Jul 17 '17 at 11:36
  • I'm not sure I understand. If I write the code from your answer (both the css above and the html example below) and then for example Material decide to change the h1 font size from 1.4em to 1.5em, won't I have to change the "1.4em" line in MY css file too? – Hibuki Jul 17 '17 at 11:53
  • 1
    @Hibuki no, you would need to use scss to generate you `.h1` rules. Otherwise you would need to use JavaScript. – t.niese Jul 17 '17 at 11:55
  • Oh, I never saw scss before (sorry, this is my first frontend project). Am I in the correct direction: Install [material scss](https://github.com/gpbl/material-ui-sass) and then apply the h1 class to my TextField (somehow). ? Edit: In your example you simply did `class="h1"` – Hibuki Jul 17 '17 at 13:17
0

If you are willing to use jquery, you could use the following code:

<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>

This sets the color / font / margin / padding properties of your Textfield to the values of your H1.

This piece of code only sets these 4 props, you could add more lines for other props, the other solution is to loop over all H1-props and set all the values 'at once'. An example for such a loop can be found here: jQuery CSS plugin that returns computed style of element to pseudo clone that element?

Hopefully this solution puts you on the right track.

Calaris
  • 158
  • 1
  • 1
  • 10