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!
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.