在 CSS 中设置导入的 React 组件样式

Question

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

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

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

我从 here 获得了 npm 包。

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;

You can see the problem I am having in this image.

谢谢大家！

Answer 1

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

size={80 px}

我在 github 上找到了这个 source 组件设置和注入的地方。希望你找到你的解决方案。

在 CSS 中设置导入的 React 组件样式

Style Imported React Component in CSS

javascript

css

components

reactjs