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!

Shanré Scheepers · Accepted Answer · 2022-04-11 21:36:10Z

2

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.

answered Apr 11, 2022 at 21:36

Shanré Scheepers

646 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tyrell Curry Over a year ago

Thank you, I ended up targeting the SVG in my css file and using !important. I was able to add styling to it, though it still behaves a bit strange, I am much better off than before 🙂

Collectives™ on Stack Overflow

Style Imported React Component in CSS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related