React - Should I replace my css files with styled components

Question

My question may turn out to be a little strange, but I want to understand, for example, I have 10 css files in my project and these styles are 90% not repeated. Is it worth using styled components in this case? ie replace all these styles with an object?

const Button = styled.button`
  font-size: 2em;
  background-color: black;
  color: white;
`;

I understand that styled components have a lot of advantages. But I want to understand if it is worth replacing the content of 10 css files with styled components? Because perhaps in the future I will need this technology

Answer 1

No, I don't think so. If they are not repeatable and reusable and you already have a lot of CSS codes and files, it will take a long time to convert them to Style-component, and also it won't bring too much advantage. Besides the advantages of styled-components, there are some disadvantages too as it is a pure JS and if it is not reusable, it is basically increasing your payload size. SO definitely in your case, I think you should stick to CSS for now.