Creating React component vs using CSS styling

I have created a tab menu using CSS styling that I use in several different spots in my ReactJS app.

.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin: 0;
padding: 0;
}

.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}

.tab button:hover {
background-color: #ddd;
}

.tab button:disabled {
background-color: #ccc;
cursor: default;
}

.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top:none;
}


This is in a index.css file that sits with all my .js files. Within my React code I use it like this, as an example:

index.css

.js

<table><tbody>
<tr className="tab"><td>
<button onClick={() => this.openTab(0)}>Tab 1</button>
<button onClick={() => this.openTab(1)}>Tab 2</button>
</td></tr>
</tbody></table>


I have been considering turning this into a React component called TabView which would render a <tr> with some <button>s inside it with all that same styling applied inline. I would pass information to it as a prop (button text and onClick handler etc). The above snippet would look like:

<tr>

<button>

// after importing TabView from TabView.js
<table><tbody>
<TabView data={someData}/>
</tbody></table>


Question is: from a stylistic point of view, within a ReactJS app, is it good design to implement something this trivial as a React component, even though it can be described entirely with CSS?

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.