在 react 中更改外部库组件的 CSS 样式

Question

我在react中使用了一个名为"拖放文件"的外部库。此库只允许向组件添加子组件并对其进行样式化。

我的问题是，库的组件样式"父"有不必要的样式元素，我只能修改子元素并在父元素中更改它们的样式。但是，我不能改变元素本身的样式。

我的问题是，有没有一种方法来更新父组件的风格，即使没有直接访问它?

Answer 1

用浏览器检查html元素。你可以使用你检查过的类、元素或id来改变style.css中的样式。

Answer 2

对不起，我没有足够的代表，但我认为，如果你能得到父元素的名称，如果你使用styledcomponents (https://styled-components.com/)

你可以通过创建一个样式版本来覆盖元素的样式。

例如，来自mui的Avatar将被 覆盖。

const StyledAvatar = styled(Avatar)`
background-color: black;
color: white;
`;

你仍然需要导入元素。

一个普通元素(例如div)可以通过以下方式进行样式化:

const StyledDiv = styled.div`
background-color: black;
color: white;
`;

希望这对你有帮助。

编辑:使用你自己的样式组件，不要忘记导出它们:)