className='-striped -highlight' not working with a fresh create-react-app APP.
See original GitHub issueWhat version of React-Table are you using?
Your bug may already be fixed in the latest release. Run yarn upgrade react-table
!
Place your version here…
6.7.5
What bug are you experiencing, or what feature are you proposing?
Please include a detailed explanation here…
With create-react-app and default CSS, react-table v6.7.5 cannot see the effect of ‘-striped’ or ‘-highlight’
Use https://codesandbox.io/s/X6npLXPRW (by clicking the “Fork” button) to reproduce the issue.
Then paste a link to your newly forked codesandbox here…
What are the steps to reproduce the issue?
- npm install -g create-react-app
- Add ‘react-table@6.7.5’ to package.json.
- replace src/App.js with following code
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactTable from 'react-table';
import 'react-table/react-table.css';
class App extends Component {
constructor() {
super();
}
render() {
const data = [
{
"location":"01-01",
"amount":150
},
{
"location":"01-02",
"amount":3000
},
{
"location":"01-03",
"amount":1201
}
];
const columns = [
{
Header: "Location",
accessor: "location"
},
{
Header: "Amount",
accessor: "amount",
Cell: props => <span className='number'>{props.value}</span>
}
];
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
<ReactTable
data={data}
columns={columns}
classsName='-striped -highlight'
/>
</div>
);
}
}
export default App;
- npm start.
Issue Analytics
- State:
- Created 6 years ago
- Comments:13 (7 by maintainers)
Top Results From Across the Web
striped -highlight' not working with a fresh create-react-app ...
className ='-striped -highlight' not working with a fresh ... With create-react-app and default CSS, react-table v6.7.5 cannot see the effect ...
Read more >Create-React-App: CSS custom classNames not loading ...
I'm using create-react-app to build a personal website and I'm having some issues with how CSS is being read in the deployed version...
Read more >How To Create React Elements with JSX - DigitalOcean
In a new terminal tab or window, start the project using the Create React App start script. The browser will autorefresh on changes,...
Read more >Row Styles - React Data Grid
The grid cannot depend on using CSS :hover selector as this will not highlight the entire row if Columns are pinned. Column Highlighting...
Read more >Migrating React table from v6 to v7 | by Sagar Shrestha
In the above code for rendering, I am using the exact structure(including class names and markups) that react-table-6 is using. This will make...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I know this closed but wanted to point out that the original bug was just an issue with the code.
The original code had an incorrect name for className (three s’)
I am looking at the focus issue - and trying to find where that may have slipped in (previously, none of the ReactTable divs could accept focus)