在 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 上找到了這個源代碼，其中設置並注入了組件。 希望你找到你的解決方案。