How to efficiently style a table inline in react

Question

I can style a table in react via:

  var tableStyle = {
       "border": "1px solid black"
    };
    return (
      <div>
        <h1>My Awesome Table</h1>
        <table style={tableStyle}>
          <th>Awesome Header</th>

Coupling my style and html into a reusable component is the react way of doing things. How can I effectively style my whole table? I could style each header via:

<th style={headerStyle}>
<th style={headerStyle}>
<th style={headerStyle}>

and

<tr style={rowStyle}>
<tr style={rowStyle}>

That's not very efficient. In plain old CSS I can just do

 table {
       //boom style all the things
    }
    th {

    }
    tr {
    }

Using CSS, particularly in a SPA application can become a maintenance headache. So I like the idea of sticking my style into this component where nobody else will inherit it. How can I do it without writing a bunch of repetitive code?

I take it using regular css classes from a separate css file is not acceptable in your application? — Chris
– Chris, Commented Feb 5, 2016 at 22:34
Polymer scope polymer-project.org/1.0/docs/devguide/styling.html — zer00ne
– zer00ne, Commented Feb 5, 2016 at 22:34
@chris right. For reasons I mentioned I dont see this as a possibility — P.Brian.Mackey
– P.Brian.Mackey, Commented Feb 5, 2016 at 22:40
You can't create class names that are guaranteed to be unique? — Mr Lister
– Mr Lister, Commented Feb 5, 2016 at 22:46
I suggest also looking up the information about styling tables on w3schools. They have some very simple to follow instructions on there and great information! w3schools.com/css/css_table.asp — Filip Grebowski
– Filip Grebowski, Commented Feb 5, 2016 at 23:03

Chris · Accepted Answer · 2016-02-05 22:53:52Z

8

Not entirely sure I understand what you're looking for, but you want a better way of having css and markup in one file with no external dependencies?

If so, this might work:

return (
  <style>{`
    table{
     border:1px solid black;
    }
  `}</style>
  <div>
    <h1>My Awesome Table</h1>
    <table>
      <th>Awesome Header</th>
      ...
)

Using template literal string formatting seems necessary here to support the <style> contents to span across multiple lines.

Alternatively:

<style>{"table{border:1px solid black;}"}</style>

edited Feb 5, 2016 at 22:53

answered Feb 5, 2016 at 22:45

Chris

59.7k20 gold badges121 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mr Lister Over a year ago

I think something like return ( <div> <style scoped> styles </style> <table> ... would be better.

Chris Over a year ago

@MrLister, sure. Valid option, but it depends on the component I suppose and we don't know much about it. I think OPs' main issue was how to declare the css rules inside react, rather than how to apply them to each element. I would personally prefer to give the div a class and then style each html element that's a child of that div class. -- but that's just preference.

Dariusz Over a year ago

I want to thank you for writing that <style> example above, I have spent weeks on trying to find a way how to apply a style to a specific component at runtime only as I'm dynamically changing styles/etc. This method seems to work for me!!! thank you!! No need for class names in css etc etc, I love it!!!

Chris Over a year ago

You're welcome @Dariusz! I use a library called emotion (styled-components lib is similar) which gives tons of options to add styles. You could take a look there too.

Christopher Chiche · Accepted Answer · 2016-11-09 14:32:07Z

0

You should have all of your styles in a separate folder/ and file and maintain separation of concerns. No CSS declarations should be in your JavaScript. If must style your components, you should be using CSS classes instead of inline-styles.

Then you could style all of your tables from one CSS file.

/*CSS file*/

table.myAwesomeTable {
  ...code
}

/*Markup */
<table className="myAwesomeTable">

</table>

edited Nov 9, 2016 at 14:32

Christopher Chiche

15.4k10 gold badges65 silver badges100 bronze badges

answered Feb 5, 2016 at 22:43

bullzito

3571 silver badge7 bronze badges

2 Comments

P.Brian.Mackey Over a year ago

As long as you are using React I see no issue with inline styles.

mkorman Over a year ago

He asked explicitly not to use a separate CSS file

Hitesh Sahu · Accepted Answer · 2018-08-17 01:34:28Z

0

define style in your global theme.js

 "table, th, td" :{
      border: "1px solid white" },

      "th, td" : {
        textAlign: "center"
    },

All tables in App will now display white border

answered Aug 17, 2018 at 1:34

Hitesh Sahu

45.6k18 gold badges217 silver badges160 bronze badges

Collectives™ on Stack Overflow

How to efficiently style a table inline in react

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related