react 组件的样式问题

我有一个 react 组件 A，A 组件使用了 className='myclass'

我在这个 myclass 里面定义了很多的变量，通过 JS 直接修改它们的值，以达到自己定制样式的目的，如：

--headbg: transparent;

但是，如果同一个页面中有用到很多次 A 组件，如 A1 修改了一次样式的话，同一页面的 A2 也会被改变样式，我想让它们的样式独立，因为是使用了别人的组件，所以很难在每一个需要改变的节点上动态设置 style，请问有没有不设置 style，又能样式独立的方法