How to efficiently style a table inline in react

react, inline style
react table border attribute
react-table header style
best way to style react components
how to create dynamic table in react js
react native table
react classname
react-bootstrap-table

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?

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>

Styling in React, Learn how to style content in React using both old-school CSS and React's inline React favors an inline approach for styling content that doesn't use CSS. to ensure everything works properly and all of our vowels are properly styled. Inline CSS means defining the CSS properties using a style attribute with an HTML tag or adding the styles directly to the element. With plain HTML, we assign a string value to style attribute. That string will contain CSS property value pairs; each property will be separated from each other by a semicolon.

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

Building a Data Table Component in React – Shopify Engineering, I started in web development when the industry used tables for layout (nearly 20 it all too easy to hide the source of animations or style changes. Unfortunately, this doesn't work properly at very narrow screen widths when the cell content contains long words. Add an inline style to adjust the height. Styling React Using CSS. ❮ Previous Next ❯. There are many ways to style React with CSS, this tutorial will take a closer look at inline styling, and CSS stylesheet. To style an element with the inline style attribute, the value must be a JavaScript object: Insert an object with the styling information:

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>

Inline Styling In React, By using CSS techniques, we can make webpages more appealing and efficient. Before jumping in, let's discuss a bit about React. It's a popular  In this part, we created a simple React application using react-create-app, added React-Bootstrap-Table, populated a table with data, worked with columns, styled the table, and selected rows. In the next part, we'll continue the journey by expanding rows, adding rows, deleting rows, and covering pagination, cell editing, and advanced customization.

DOM Elements – React, This is consistent with the DOM style JavaScript property, is more efficient, and React will automatically append a “px” suffix to certain numeric inline style  In React, inline styles are not specified as a string. Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. node.style.backgroundImage ). Vendor prefixes other than ms should begin with a capital letter. This is why WebkitTransition has an uppercase "W".

Inline border style not rendering correctly · Issue #8957 · facebook , Did this work in previous versions of React? Tested in 15.4.2 on the latest versions of Chrome, Firefox and Safari. Unaware of it working properly  In React you don't even need to specify px for many style properties. You can simply do var someSize = {width: 2} and it will be converted to pixels. React will automatically append a “px” suffix to certain numeric inline style properties. If you want to use units other than “px”, specify the value as a string with the desired unit.

Inline Styles, In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose  In React, inline styles are not specified as a string. Instead they are specified with an object whose key is the camelCased version of the style name, and whose value is the style's value, usually a string. So instead of background-image use backgroundImage.

Comments
  • I take it using regular css classes from a separate css file is not acceptable in your application?
  • Polymer scope polymer-project.org/1.0/docs/devguide/styling.html
  • @chris right. For reasons I mentioned I dont see this as a possibility
  • You can't create class names that are guaranteed to be unique?
  • 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
  • I think something like return ( <div> <style scoped> styles </style> <table> ... would be better.
  • @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.
  • As long as you are using React I see no issue with inline styles.
  • He asked explicitly not to use a separate CSS file