We Keep Coding

How to maintain the hover effect of the sibling in Material-UI

Card Component
import image from "../../Assets/pic.jpg";
import React, { useState } from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import FavoriteBorderIcon from "#material-ui/icons/FavoriteBorder";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Typography from "#material-ui/core/Typography";
import styles from "./Cards.module.css";
import Stars from "../Stars/Stars";
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
});
const Cards = () => {
const [showComponent, setShowComponent] = useState(false);
const classes = useStyles();
const handleToggleHoverIn = (event) => {
event.preventDefault();
setShowComponent(true);
};
const handleToggleHoverOut = (event) => {
event.preventDefault();
setShowComponent(false);
};
console.log("The state showComponent value is ", showComponent);
return (
<div className={styles.container}>
<Card
onMouseEnter={handleToggleHoverIn}
onMouseLeave={handleToggleHoverOut}
className={classes.root}
>
<CardActionArea>
<div id={styles.imageCentre}>
<CardMedia
component="img"
alt=""
className={styles.image}
image={image}
title="Contemplative Reptile"
/>
{/*
here when I hover over my <Stars/> and <FavoriteBorderIcon/>, the hover effect of opacity that I have on
my Card's image, vanishes
*/}
{showComponent ? (
<>
<div id={styles.stars}>
<Stars />
</div>
<FavoriteBorderIcon fontSize="large" id={styles.heart} />
</>
) : null}
</div>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
id={styles.textCentre}
>
Printed round Neck
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
<div class="text">
<p id={styles.price}>
<b>Rs. 454</b>
<strike>Rs. 699</strike>
<span style={{ color: "#FF7F7F" }}> (35 % off) </span>
</p>
</div>
</Typography>
</CardContent>
</CardActionArea>
</Card>
</div>
);
};
export default Cards;
Card's CSS styling
.image {
width: 300px;
justify-content: center;
}
.image:hover {
opacity: 0.5;
}
#imageCentre {
align-items: center !important;
position: relative;
}
/* #imageCentre:hover {
opacity: 0.5;
} */
#textCentre {
text-align: center;
}
.container {
display: flex;
justify-content: center;
padding: 2em;
}
#price,
.text h3 {
text-align: center;
}
#price b {
padding-right: 0.5em;
font-size: 1.3em;
}
#heart {
position: absolute;
top: 0;
right: 0;
padding: 20px 20px 0 0;
color: aliceblue;
}
#stars {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
margin-top: 50%;
}
when I hover over my card, the opacity hover-effect comes in but when I move to the heart or star component, the opacity-hover vanishes. I want the hover-effect to remain even when I hover over my star and heart component. Is there any way that I can make the opacity-hover-effect to remain there, when I hover over the stars and heart component
Live Link

Below is an example of one way to do this. The key aspect of the solution is to use the :hover pseudo-class on a common parent of the img, stars, and icon elements. In my example, this is done via the action class applied to the CardActionArea element. My example is using makeStyles, but you could achieve the same effect in your CSS with the following:
#imageCentre:hover .image {
opacity: 0.5;
}
It looks like you tried something similar (the commented out #imageCenter:hover styles), but since you weren't targeting the descendant .image class for the opacity, the opacity would have impacted the stars and favorite icon as well which you probably don't want.
Here's a full working example:
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import Card from "#material-ui/core/Card";
import CardActionArea from "#material-ui/core/CardActionArea";
import CardActions from "#material-ui/core/CardActions";
import CardContent from "#material-ui/core/CardContent";
import CardMedia from "#material-ui/core/CardMedia";
import Button from "#material-ui/core/Button";
import Typography from "#material-ui/core/Typography";
import FavoriteBorderIcon from "#material-ui/icons/FavoriteBorder";
import Rating from "#material-ui/lab/Rating";
const useStyles = makeStyles({
root: {
maxWidth: 345
},
media: {
height: 140
},
action: {
position: "relative",
"&:hover $media": {
opacity: 0.5
}
},
favorite: {
position: "absolute",
top: 10,
left: 10,
color: "white"
},
rating: {
position: "absolute",
top: 100,
left: 100
}
});
export default function MediaCard() {
const classes = useStyles();
return (
<Card className={classes.root}>
<CardActionArea className={classes.action}>
<CardMedia
component="img"
className={classes.media}
image="https://material-ui.com/static/images/cards/contemplative-reptile.jpg"
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
Lizard
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000
species, ranging across all continents except Antarctica
</Typography>
</CardContent>
<FavoriteBorderIcon className={classes.favorite} />
<Rating className={classes.rating} name="rating" />
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
);
}

Styled Component Custom CSS in ReactJS

I'm actually having trouble doing CSS with the styled component in React. Given below is the code snippet
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const Styles = styled.div`
.navbar {
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
}
.h1 {
color: white;
}
`;
const Footer = () => {
return (
<Styles>
<Navbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<h1>Hi</h1>
</Col>
</Row>
</Container>
</Navbar>
</Styles>
);
};
export default Footer;
What I want to do is to change the color of the h1 tag to white but the above custom CSS is not working. I've tried background-color too, but still the issue persists.

With styled-components, you shouldn't use classes for styling elements. You should use separated wrappers for components, it's the main point. I think you wanted to do something like this:
import React from 'react';
import { Navbar, Container, Row, Col } from 'reactstrap';
import styled from 'styled-components';
const StyledNavbar = styled(Navbar)`
background-color: black;
position: absolute;
bottom: 0;
width: 100%;
`;
const Header = styled.h1`
color: white;
`;
const Footer = () => {
return (
<StyledNavbar>
<Container>
<Row>
<Col sm={{ size: 4 }}>
<Header>Hi</Header>
</Col>
</Row>
</Container>
</StyledNavbar>
);
};
export default Footer;

you used .h1 the class, not h1 the tag, in your css.
https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting

React Component is not being styled by .Css file

My title component is not getting styled by its css file.
I want it to have a green background.
It is coming up white for some reason.
Here is the Component Js file:
import React from "react";
function Title() {
return (
<div className="Title">
<h1>Welcome to ZXY Gallery</h1>
</div>
);
}
export default Title;
Here is the .Css file:
/* src/Title.css */
title {
box-sizing: border-box;
width: 50%;
display: flex;
justify-content: center;
padding: 1em;
margin-bottom: 2em;
background-color: green;
}
Here is the app.js file:
import React from "react";
// import Split from "react-split";
import SplitPane from "react-split-pane";
import "./App.css";
import Title from "./Title";
import "./Title.css";
function App() {
return (
<div>
<Title />
<SplitPane
split="vertical"
minSize={50}
defaultSize={parseInt(localStorage.getItem("splitPos"), 10)}
onChange={size => localStorage.setItem("splitPos", size)}
>
<div style={{ height: "75%", backgroundColor: "red", border: "5%" }}>
<h1>This Area is Highly Toggleable</h1>
</div>
<div style={{ height: "85%", backgroundColor: "yellow", border: "5%" }}>
<h1>
We love these
<a target="_blank" href="http://chillcastle.com/art">
<h1>Artists</h1>
</a>
They have shown with us in the past.
</h1>
</div>
</SplitPane>
</div>
);
}
export default App;
Does anyone see why I cant get the Title to have for example a green background?

Since you are trying to reference a class, you need to put ".Title" in your css instead of "title".

Ant Design Layout is not working as expected

I have a React application. I have decided to add a layout using Ant Design. And i followed below example.
https://2x.ant.design/components/layout/#components-layout-demo-custom-trigger
This is my component code. (Full.js)
import React, { Component, Fragment } from 'react'
import { Layout, Menu } from 'antd'
import Icon from '#ant-design/icons'
import './Full.css'
import ReactDOM from 'react-dom'
import DailyData from '../DailyData'
import Container from 'react-bootstrap/Container'
import Toggle from './Toggle'
const { Header, Footer, Sider, Content } = Layout;
class Full extends React.Component {
state = {
collapsed: false,
};
toggle = () => {
this.setState({
collapsed: !this.state.collapsed,
});
}
render() {
return (
<Layout style={{ height: "100vh" }}>
<Sider
trigger={null}
collapsible
collapsed={this.state.collapsed}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
<Menu.Item key="1">
<Icon type="user" />
<span>nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span>nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span>nav 3</span>
</Menu.Item>
</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 }}>
Content
</Content>
</Layout>
</Layout>
);
}
}
export default Full;
I'm using this component as below in App.js file.
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Header from './components/layout/Header.js'
import DailyData from './components/DailyData.js'
import Container from 'react-bootstrap/Container'
import Toggle from './components/layout/Toggle.js'
import Full from './components/layout/Full'
class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="App">
<Full />
</div >
);
}
}
export default App;
My Full.css file as below.
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 16px;
cursor: pointer;
transition: color .3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
color: #108ee9;
}
#components-layout-demo-custom-trigger .logo {
height: 32px;
background: #333;
border-radius: 6px;
margin: 16px;
}
But the output will display like this.

Well, I also used Ant design Sider and I am using version 4.4.1. Not sure what you want to acheive, so I am sharing the whole code with you.
import React from 'react';
import { Route, Switch, NavLink, Redirect, withRouter } from 'react-router-dom'
import {RouteComponentProps} from "react-router";
import { Layout, Menu } from 'antd';
import {
DesktopOutlined,
PieChartOutlined,
UserOutlined,
SettingOutlined
} from '#ant-design/icons';
import Shipper from '../shipper/shipper'
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
// Type whatever you expect in 'this.props.match.params.*'
type PathParamsType = {
param1: string,
}
// Your component own properties
type PropsType = RouteComponentProps<PathParamsType> & {
}
class Sidebar extends React.Component<PropsType> {
state = {
collapsed: false,
};
onCollapse = (collapsed: any) => {
this.setState({ collapsed });
};
render() {
let { pathname } = this.props.location;
return (
<Layout style={{ minHeight: '100vh' }}>
<Header className="header">
<div className="logo" />
<Menu mode="horizontal" theme="dark" className="flex-setting">
<SubMenu icon={<SettingOutlined />} title="Settings">
<Menu.ItemGroup title="Basic Settings">
<Menu.Item key="setting:2">
<a href={"/accounts/logout/"} target="_self">
Signout
</a>
</Menu.Item>
</Menu.ItemGroup>
</SubMenu>
</Menu>
</Header>
<Layout>
<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
{/* <div className="logo" /> */}
<Menu theme="dark"
defaultSelectedKeys={['/shipper']}
selectedKeys={[pathname]}
mode="inline">
<Menu.Item key="/shipper" icon={<PieChartOutlined />}>
<NavLink to="/shipper">
<span>Shipper</span>
</NavLink>
</Menu.Item>
</SubMenu>
</Menu>
</Sider>
<Layout className="site-layout">
{/* <Header className="site-layout-background" style={{ padding: 0 }} /> */}
<Content style={{ margin: "16px 16px", background: "#fff" }}>
<div style={{ padding: 24, background: "#fff", minHeight: 360 }}>
<Switch>
<Route exact path="/" render={() => (
<Redirect to="/shipper"/>
)}/>
<Route path="/shipper">
<Shipper />
</Route>
</Switch>
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>Copyrights © 2020 All Rights Reseverd by Company.</Footer>
</Layout>
</Layout>
</Layout>
);
}
}
export default withRouter(Sidebar);
My css is following:
.header {
display: inherit;
}
.logo {
height: 32px;
width: 35px;
margin: 16px;
background-image: url("main-logo.jpg");
}
.flex-setting {
display: flex;
flex-direction: row-reverse;
width: 100%;
}
Alot of things not necessary for you, so remove that part. Once you follow this, you will achieve something link this:

Remove " #components-layout-demo-custom-trigger" from css file and it will work.
I am sharing my css file.
App.css
#import "~antd/dist/antd.css";
.trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
.site-layout .site-layout-background {
background: #fff;
}

Because the example has trigger class ID # component-layout-demo-custom-trigger in front of it but the copied code also has # component-layout-demo-custom-trigger removed
enter image description here

Styling help: Transparent appbar with Material UI in React.js

I am using material ui and i have been trying to make the navabr transparent and get the background image behind it, a similar style to stripe.com and i am having trouble moving the image behind and getting it transparent.
Is there a way to get it looking like stripe.com with the transparent appbar and background image moved up? The main problem is moving up the background image
Code for the Navbar
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Toolbar from '#material-ui/core/Toolbar';
import Typography from '#material-ui/core/Typography';
import Button from '#material-ui/core/Button';
import IconButton from '#material-ui/core/IconButton';
import Dialog from '#material-ui/core/Dialog';
import DialogActions from '#material-ui/core/DialogActions';
import DialogContent from '#material-ui/core/DialogContent';
import DialogContentText from '#material-ui/core/DialogContentText';
import DialogTitle from '#material-ui/core/DialogTitle';
import Checkbox from '#material-ui/core/Checkbox';
import TextField from '#material-ui/core/TextField';
import { Link } from 'react-router-dom'
// Styling for our navbar
const styles = {
root: {
flexGrow: 1,
},
grow: {
flexGrow: 1,
},
menuButton: {
marginLeft: -12,
marginRight: 20,
},
button: {
margin: 10,
fontSize: 17
},
text: {
textAlign: 'center',
fontSize: 20,
padding: '0.5em'
},
textField: {
align: 'center',
width: 500
}
};
const MyLink = props => <Link to="/signup" {...props} />
// here is our navbar
class Navbar extends React.Component{
state = {
open: false,
};
handleClickOpen = () => {
this.setState({ open: true });
};
handleClose = () => {
this.setState({ open: false });
};
state = {
checkedA: true,
checkedB: true,
checkedF: true,
};
handleChange = name => event => {
this.setState({ [name]: event.target.checked });
};
render(){
const { classes } = this.props
return (
<div className={classes.root}>
<AppBar position="static" color="inherit" style={{ background: 'transparent', boxShadow: 'none'}}>
<Toolbar>
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
</IconButton>
<Typography variant="h6" color="inherit" className={classes.grow}>
</Typography>
<Button color="inherit" onClick={this.handleClickOpen}>Login</Button>
</Toolbar>
</AppBar>
<Dialog
open={this.state.open}
onClose={this.handleClose}
aria-labelledby="alert-dialog-title"
aria-describedby="alert-dialog-description">
<DialogTitle id="alert-dialog-title">{"Have an account? Log In"}</DialogTitle>
<DialogContent>
<DialogTitle>
<Button variant="contained" color="primary" className={classes.button}>
Sign In with Facebook </Button>
<Button variant="contained" color="primary" className={classes.button}>
Sign In with LinkedIn </Button>
</DialogTitle>
<DialogContentText className={classes.text}>
or
</DialogContentText>
<form>
<TextField
id="filled-email-input"
label="Email"
className={classes.textField}
type="email"
name="email"
autoComplete="email"
margin="normal"
variant="filled"
/>
</form>
<form>
<TextField
id="filled-password-input"
label="Password"
className={classes.textField}
type="password"
autoComplete="current-password"
margin="normal"
variant="filled"
/>
</form>
<Checkbox
checked={this.state.checkedG}
onChange={this.handleChange('checkedG')}
value="checkedG"
color= "inherit"
/>
<DialogContentText>
Remember Me?
</DialogContentText>
</DialogContent>
<DialogActions>
<Button component={MyLink} color="primary" autoFocus>
Don't have an account? Sign Up
</Button>
</DialogActions>
</Dialog>
</div>
);
}
}
// requiring a class object
Navbar.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Navbar);
And heres the code for the Lading page header/background
import React, {Component} from 'react';
import Background from '../img/fixedImg.png';
import './Header.css';
import { Link } from 'react-router-dom';
const headerStyle = {
backgroundImage: `url( ${Background} )`,
height: '100vh',
backgroundSize: 'cover'
}
// class component for our image on the home page
// the <br> needs fixing in the css file
class Header extends Component {
render() {
return (
<header style={headerStyle}>
<h1>Hashtag Hound </h1>
<p> Connecting influencers with brands </p>
<Link to="/signup">Find an Influencer</Link>
</header>
);
}
};
export default Header;
Here is the css for it
header {
margin: 0 auto;
text-align: center;
}
header h1 {
margin: 0;
font-family: arial;
font-size: 4rem;
color: #383636;
}
header p {
font-weight: 700;
font-size: 1.75rem;
font-family: arial;
color: #383636;
}
header a {
box-shadow: 0 3px 3px 0 rgb(0,0,0,1);
font-weight: 700;
font-size: 1.2rem;
background-color: black;
border-color: black;
color: white;
padding: 1.25rem 2.5rem;
border-radius: 2rem;
text-decoration: none;
font-family: arial;
display: inline-block;
}