在 CSS 中样式化导入的 React 组件

Question

我希望这是一个简单的问题。 我正在尝试调整我导入的组件的大小。

具体来说，我希望能够在 CSS 中为此组件设置高度和宽度。 但是，添加一个className并以class中的 class 为目标或尝试设置父div的样式对组件绝对没有任何作用。

我指的组件是： <DarkModeToggle/>组件上有一个size={}属性可用，但它只接受一个值，我希望能够在 CSS 中使用媒体查询。

我从这里得到了 npm package。

import React from 'react';
import {DarkModeToggle} from 'react-dark-mode-toggle-2';
import '../style.css';

function App() {
  const [isDarkMode, setIsDarkMode] = React.useState(false);
  return (
    <nav className="navbar">
      <div className="nav-flex">
        <div className="brand">devfinder</div>
        <div className="light-toggle">
          <DarkModeToggle
            onChange={setIsDarkMode}
            isDarkMode={isDarkMode}
            size={80}
          />
        </div>
      </div>
    </nav>
  );
}

export default App;

您可以在这张图片中看到我遇到的问题。

感谢你们！

Answer 1

您使用的 DarkModeToggle 是注入的可重用组件吗？ 我了解到您曾尝试在 CSS 中设计“DarkModeToggle”样式。我知道!important的做法并不总是良好的道德规范，但也许这行得通？ ...您是否尝试像下面这样添加空格和像素，即使它默认为像素渲染，并且在您的@media 中将其更改为小于 80？

size={80 px}

我在 github 上找到了这个源代码，其中设置并注入了组件。 希望你找到你的解决方案。