Can you explain what you mean by this? Do you mean just generating hundreds of strings (with long atmoic class names) to style each component vs loading a global CSS?
IDK about React but Vue also has things like scoping, where the elements get unique IDs appended as data tags so you don't have to worry about CSS global scope clashes. Plus with Webpack/Vite the CSS automatically gets extracted and via HTTP2 only loads the tiny JS and CSS files needed only for the components used on the page.
In that case giant blobs of CSS and JS would be less efficient.
It used to be, that CSS-in-JS meant people naively writing something using a computed string to use the HTML style attribute, like so
var style="color:blue;text-align:center;"
return <h1 style={style} />
and some CSS in JS frameworks compile down to pretty much that. However, this is a bad practice, because you will consistently see worse performance than just using css files and classnames instead.
IDK about React but Vue also has things like scoping, where the elements get unique IDs appended as data tags so you don't have to worry about CSS global scope clashes. Plus with Webpack/Vite the CSS automatically gets extracted and via HTTP2 only loads the tiny JS and CSS files needed only for the components used on the page.
In that case giant blobs of CSS and JS would be less efficient.