I am using an external library in react called "drag and drop files" This library only allows adding children to the component and style them.
My problem is, the library's component style "the parent" has unnecessary style elements, and I'm only able to modify the children and change their style inside the parent element. However, I can't change the element's style itself.
My question is, is there a way to update the parent component style even though there's no direct access to it?
Inspect html elements with your browser. And you can change the styles in your style.css using classes or elements or ids that you inspected.
sorry don't have enough rep for a comment but I would think that if you can get the name of the parent element and if you use styledcomponents (https://styled-components.com/)
you could just override the elements styling by creating a styledversion of it.
for example an Avatar from mui would be overridden by
const StyledAvatar = styled(Avatar)`
background-color: black;
color: white;
`;
You'd still need to import the element though.
a normal element (div for example) could be styled by doing the following:
const StyledDiv = styled.div`
background-color: black;
color: white;
`;
hope this kinda helps.
Edit: to use your own styled components, don't forget to export them :)