I want to highlight the nav menu when scrolling this component in react.
If the Navbar is "Home About Products"
When I will scroll in the about section, About nav menu will be active or highlight.
How can I do this in react and is there any npm package for this?
You can use intersection observer.
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
or
You can also use waypoint Library
https://www.npmjs.com/package/react-waypoint
I want to use antd Slider component in form.
So I put it the way shown in this sandbox
BUT
in sandbox - it works fine, and in my project - it's not visible.
Applying style={{display: ...}} or style={{height: ...}} didn't help.
Devtools show that elements with classnames ant-slider-rail, ant-slider-track have height:0
I'm out of ideas why that could happen?
I had the same issue. here is the solution
you should import the css file
import { Slider } from 'antd';
import 'antd/dist/antd.css';
I update color theme by updating theme prop on ThemeProvider. And one of by components has Popper and if I toggle it and dispatch changing theme prop the Popper disappears.
Nevertheless, it updates default color value. But I want to make Popper with no rerender to make it visible anyway
Demo is unavailable
I am new to React, I have some confusion related to CSS styling related to rwmc components.
I am just rendering two Button components on web page by importing it from '#rmwc/button' package. I am following this tutorial
https://jamesmfriedman.github.io/rmwc/buttons
I have also imported material design for this component like
import '#material/button/dist/mdc.button.css';
Now I have two buttons on my screens, for one of the button component, I have mentioned className property. In that class button color is just getting red which is working fine but I am wondering here, besides changing color of button, all other css defined in mdc.button.css are just getting applied to this as well, I don't know why is it happening so, Is this a correct behavior.
I am asking this because I have read here that
https://jamesmfriedman.github.io/rmwc/styling-theming
All of the components have the material-components-web classNames on them and you can add your own which means you are changing main class.
Any help will be appreciated.
Code:
import React from 'react';
import ReactDOM from 'react-dom';
import { DrawerHeader } from '#rmwc/drawer';
import { Button, ButtonIcon } from '#rmwc/button';
import '#material/button/dist/mdc.button.css';
//import styles from './index.module.css';
import './index.css'
const MyComponent = props => (
<div>
<Button>Default</Button>
<Button className="myDrawerHeader">Default2</Button>
</div>
);
ReactDOM.render(<MyComponent />, document.getElementById('root'));
index.css
.myDrawerHeader {
color: red !important;
}
Output on the screen is coming this which I think is wrong. Why all other styles from .mdc are getting applied to second button, I have just changed color of it.
screen-output-now
I think the behavior here is correct. Both the buttons have material-components-web css className and what you are doing is, adding another class to it. You are not actually changing the main class, you are extending the css styles of the second button using another class.
It behaves underneath as,
<button className="material-components-web">Default</button>
<button className="material-components-web myDrawerHeader">Default2</button>
I agree with Vishmi Money, the behavior is expected. When looking at the source code of the lib you used, its appeared a comment for classname props,
https://github.com/jamesmfriedman/rmwc/blob/master/src/button/index.js
/** Additional className for the button */
className?: string
So I think the idea is beside default classes you can define your own class and if you want to override some default behaviors then you can write it in your own class.
I am using MaterialUI for React. It has some transition components like Fade, Slide etc.
Is there a way to trigger those transitions when a component gets mounted or unmounted?