Okay, backing up. Here’s the problem, as you define it: some developer somewhere adds CSS to your codebase that has unintended consequences. By packaging in a reusable component, you’ve isolated the problem.
But in reality, all you’ve done is moved the API. You still need the developer to use your component. Do you then wrap every native in a component, like links and inputs? If you make a <Button>, what’s to say some dev isn’t going to forget it’s there and use a native <button>? What if they need/want something slightly different, do you keep adding more and more options to the component? These can be answered, but these are all the same decisions you would make in CSS land.
It’s a lot of overhead, and I don’t see the gain. What I do see is permission implicitly granted for devs who don’t understand CSS—and by that I mean things like positioning and layout and margin collapsing—to start writing CSS willy nilly.