Style Imported React Component in CSS

Question

I am hoping this is a simple question. I am trying to resize a Component I imported.

Specifically, I would like to be able to set a height and width in CSS for this component. However, adding a className and targeting that class in CSS or trying to style the parent div does absolutely nothing to the Component.

The component I am referring to is: <DarkModeToggle/> There is a size={} property available on the Component, but it only accepts a single value, I'd like the ability to use Media Queries in CSS instead.

I got the npm package from here.

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.

Thank you guys!

Answer 1

Is the DarkModeToggle you're using an injected reusable component? And I gather that you tried styling 'DarkModeToggle' in CSS. I know the practice of !important isn't always good ethic, but maybe that works? ... did you try adding a space and px like the below even if it defaults to px rendering, and in your @media changing it to be smaller than 80?

size={80 px}

I found this source on github where the component is set, and injected. Hope you find your solution.