I'm currently using reactJs along with ant design to help me build a website. However, I've stumbled upon a problem. I can change the actual color of a menu, but I can't change the color of the menu item when it's been selected, or when the mouse is hovering over it. Here's the menu, Menu Image I want to change that white to a light green, but I haven't found any way to directly access it and change it. Also, I don't want to use LESS to do it.
Does anyone know how to fix this? Here's my code for the layout.
import { Layout, Menu, Icon, Row, Button, Col } from 'antd';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
class BasicLayout extends React.Component {
state = {
collapsed: false,
path: this.path
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider className='ant-menu' trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu className='ant-menu' mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" >
<Link to='/'>
<Icon type="home" />
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to='/about'>
<Icon type="plus" />
<span>About</span>
</Link>
</Menu.Item>
<SubMenu key="3" title={<span><Icon type="database" /><span>Directory</span></span>}>
<Menu.Item>
<Link to='/resources/living'>
<span>Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/water2'>
<span>Non-Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/recycle'>
<span>Recycling Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/reducing'>
<span>Reducing Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources'>
<span>General</span>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 280,
}}
>
{this.props.children}
</Content>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
I'm currently using reactJs along with ant design to help me build a website. However, I've stumbled upon a problem. I can change the actual color of a menu, but I can't change the color of the menu item when it's been selected, or when the mouse is hovering over it. Here's the menu, Menu Image I want to change that white to a light green, but I haven't found any way to directly access it and change it. Also, I don't want to use LESS to do it.
Does anyone know how to fix this? Here's my code for the layout.
import { Layout, Menu, Icon, Row, Button, Col } from 'antd';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;
class BasicLayout extends React.Component {
state = {
collapsed: false,
path: this.path
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
};
render() {
return (
<Layout>
<Sider className='ant-menu' trigger={null} collapsible collapsed={this.state.collapsed}>
<div className="logo" />
<Menu className='ant-menu' mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1" >
<Link to='/'>
<Icon type="home" />
<span>Home</span>
</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to='/about'>
<Icon type="plus" />
<span>About</span>
</Link>
</Menu.Item>
<SubMenu key="3" title={<span><Icon type="database" /><span>Directory</span></span>}>
<Menu.Item>
<Link to='/resources/living'>
<span>Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/water2'>
<span>Non-Living Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/recycle'>
<span>Recycling Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources/reducing'>
<span>Reducing Resources</span>
</Link>
</Menu.Item>
<Menu.Item>
<Link to='/resources'>
<span>General</span>
</Link>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }}>
<Icon
className="trigger"
type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
onClick={this.toggle}
/>
</Header>
<Content
style={{
margin: '24px 16px',
padding: 24,
background: '#fff',
minHeight: 280,
}}
>
{this.props.children}
</Content>
</Layout>
</Layout>
);
}
}
export default BasicLayout;
1 Answer
Reset to default 2You need to change Link to NavLink and add attribute activeClassName
<NavLink to="/portoflio" activeClassName="your-active-class" className="link">Portoflio</NavLink>
For the hover options you can achieve it only with css
a.link:hover {
/*Any style you want to have link on mouse over*/
background-color: yellow;
}
.your-active-class{
/*Any style you want to have link that is active*/
background-color: yellow;
}
https://www.w3schools./cssref/sel_hover.asp