Use a style for react.js map without using CSS - css

Question

So I have this css code:
.tab-top {
padding-left: 12%;
padding-top: 2%;
color: var(--cloudy-white);
display: flex;
flex-direction: row;
font-family: "NTR Regular";
font-size: 15px;
}
.tab-top > div {
text-align: center;
margin-left: 3%;
border: 1px red solid;
}
How would I do this in react.js with the following code:
function Navigation() {
const topTabs = tabs.map(tab =>
<div>
{tab}
</div>
);
return (
<div className="tab-top">
{topTabs}
</div>
);
}
(tabs is declared)
Also I'm fairly new to react.js so if I can improve the following code in any way please leave suggestions.

Answer 1

you can use style of react if you want create mutiple css style do like this
function Navigation() {
const styles={ tabtop:{
textAlign: "center",
marginLeft: "2%",
marginTop: "1%",
},
anohter:{ width:"100%"},
}
const topTabs = tabs.map(tab =>
<div>
{tab}
</div>
);
return (
<div style={styles.tabtop}>
{topTabs}
</div>
);
}
or you can do it like that for single usage
function Navigation() {
const topTabs = tabs.map(tab =>
<div>
{tab}
</div>
);
return (
<div style={{
textAlign: "center",
marginLeft: "2%",
marginTop: "1%",
}}>
{topTabs}
</div>
);
}
or
i think it should be like this
import React from "react";
import styled from "styled-components";
const Thing = styled.div.attrs(() => ({ tabIndex: 0 }))`
.tab-top {
padding-left: 12%;
padding-top: 2%;
color: var(--cloudy-white);
display: flex;
flex-direction: row;
font-family: "NTR Regular";
font-size: 15px;
}
.tab-top > div {
text-align: center;
margin-left: 3%;
border: 1px red solid;
}
`;
function Navigation() {
const topTabs = tabs.map(tab =>
<div>
{tab}
</div>
);
return (
<Thing className="tab-top">
{topTabs}
</Thing>
);
}