This is my component with styled-components:

import styled from "styled-components";

const StyledEditButton = styled.button`
  border-radius: 5px;
`;

interface Props {
  value: string;
}

export const EditButton = ({ value }: Props) => {
  return <StyledEditButton>{value}</StyledEditButton>;
};

I have a question about whether or not to export the styles.

If I am not going to reuse this style (StyledEditButton) later on, that is, it will only affect this component, is it necessary to export it to another file and import it to the EditButton? is that in all the tutorials I've seen, they only talk about components that are going to be reused, like the main button, input, etc... and of course, they export the style, but precisely the one I have, I'll just use it instead specific. Is it possible to keep the style in the component and not have to export it? I'm sure it's a dumb question, but I've been looking a lot on the internet and I haven't found anything about it, nor repositories where people use Styled-component.

Hope someone can shed some light on this for me.

Thank you very much!

CodePudding user response：

Nothing wrong with keeping the style in. I usually just do what I feel is right. If the file gets too bulky, I'd move styles into another file, even if I use it only in one place.

Otherwise, if the file size is manageable (which is most of the cases) — I'd say just leave it there.