How can I create a Button with hover effect I can't really get it and I have used bootstrap
Button Component:
import React from "react";
import "./button.css";
const Button = ({ title, colorStyle }) => {
return (
<>
<button type="submit" className={colorStyle}>
{title}
</button>
</> );
};
export default Button;
And import line is::
<Button title="Shop" colorStyle="bg-dark text-white" />
in your button.css add
button::hover {
css declarations;
}
Just use react-bootstrap components. The button of it already has a hover effect in default state: https://react-bootstrap.github.io/components/buttons/
Well, the hover effect has nothing to do with react. What you can do is rely on plain old CSS for this. The class that you have added on the button can use used to do this. Your code would look something like this if you wanted a background-changing effect.
bg-dark {
background: black;
}
bg-dark:hover {
background: red;
}
In the above example, your button's background colour will switch to red on hover.
Let me know if you have any follow up questions.
Related
I am using React Ant component. I would like to change the background color of Select.
I have followed the method from How to change the style of a Ant-Design 'Select' component?. It didn't work if the 'antd/dist/antd.css' was imported. However, it did change the background color of Select if 'antd/dist/antd.css' had not been imported.
How should I change the color with the import of 'antd/dist/antd.css'? The following is the code and css for react
AntdSelect.js
import React from 'react'
import { Select } from 'antd'
import 'antd/dist/antd.css';
import './antd.css'
const { Option } = Select;
function AntdSelect() {
return (
<div>
<Select
className="ant-select-selection"
style={{ width: 200 }}>
<Option value="Daily">Daily</Option>
<Option value="Weekly">Weekly</Option>
<Option value="Monthly">Monthly</Option>
<Option value="Yearly">Yearly</Option>
</Select>
</div>
)
}
export default AntdSelect
antd.css
.ant-select-selection {
background-color: green;
}
The objective is to change the background color to green:
Background green
The className which you're looking for is ant-select-selection-search
.ant-select-selection-search {
background-color: green;
}
SOLVING STEPS
Open up your inspector and point to the input.
See the className which governs the input. In this example, it's ant-select-selection-search
Change the background color in your css.
If you see no changes, add !important.
I'm trying to build a React component that shows multiple images stored in a database, where below each thumbnail image there is a button linking to its dedicated page. Now, I would like each button to show the dominant color of the image as background on hover. I already have the colors stored in database (artwork.palette.DOMINANT), but struggles to pass the hex code to the React component.
The problem is, inline style cannot set properties of pseudo selectors like a:hover, and because the color is dynamically fetched with the artwork object, I can not set it in a global and static css. Is there a way to set component-scoped style in React? Presumably like <style scoped>...</style>.
Here is my code, I only kept the gist of it for simplicity's sake.
const ImageBox = ({ artwork }) => {
return (
<Fragment>
<div className="image">
<img src={artwork.resources.THUMBNAIL} alt={artwork.title} />
</div>
<div className="caption">
<span>By {artwork.artist}.</span>
</div>
<div className="button">
<a href="!#" style={{ color: artwork.palette.DOMINANT }}>
Details
</a>
</div>
</Fragment>
);
};
You could use JS to modify the global properties of CSS.
Declare properties in index.css or App.css and add your basic styles that will utilize these variables.
:root {
--color-surface: white;
}
button {
background: var(--color-surface);
}
Modify these properties using JS(onMouseEnter and onMouseLeave). i.e.
//onMouseEnter
document.documentElement.style.setProperty("--color-surface", "black");
//onMouseLeave
document.documentElement.style.setProperty("--color-surface", "white")
There a few references you can follow:
Blog and CodSandBox
Note: Not sure if it's a good practice(I haven't seen in projects I've worked on), I would recommend using CSS-in-JS or libraries such as styled component.
Thanks to #PramodMali, I found the CSS-in-JS approach as a elegant way to solve this problem. For anyone who stumbles upon the same struggle in the future, here's how I solved it with react-css:
import { createUseStyles } from "react-jss";
const useStyles = (dominantColor = "#fff") =>
createUseStyles({
toDetailPage: {
color: dominantColor,
"&:hover": {
color: "#000",
background: dominantColor,
}
}
});
After defining the style generator, use it to dynamically set classes in component:
const ImageBox = ({ artwork }) => {
const classes = useStyles(artwork.palette.dominant)();
return (
<Fragment>
<div className="image">
<img src={artwork.resources.THUMBNAIL} alt={artwork.title} />
</div>
<div className="caption">
<span>By {artwork.artist}.</span>
</div>
<div className="button">
<a href="!#" className={classes.toDetailPage}>
Details
</a>
</div>
</Fragment>
);
};
This will then generate dynamic classes on render, for instance detailsButton-0-2-7, which applies the properties passed to the generator function when defining classes.
I was looking for how to set styles dynamically. My main intention was to write a style for hover. Using state to track whether it is hovered or not is good but that will cost render for each update. So I thought How I can solve it with out any state change. I end up doing this and it works perfectly.
<a
target='_blank'
href="#"
onMouseOver={(e) => e.target.style.color = 'red'}
onMouseOut={(e) => e.target.style.color = ''}
>
This is my link
</a>
I am trying to change the background color of a react-bootstrap list group item.
My example.js file
import {classes} from "./Sidebar.module.css";
import ListGroup from "react-bootstrap/ListGroup";
import React from "react";
const Sidebar = () => {
return (
<div>
<ListGroup>
<ListGroup.Item className = {classes.Color} >Products</ListGroup.Item>
<ListGroup.Item>Stores</ListGroup.Item>
</ListGroup>
</div>
)
}
Sidebar.module.css file has
.Color{
background-color: red;
Even after giving a custom class name, the background color is still the default color.
If you want to change a default color use !important. Also remove curly braces when you load styles from Sidebar.module.css. Like this
import classes from './Sidebar.module.css';
.Color {
background-color: red !important;
}
I am using Fontawesome icons in my react and I am using CSS modules in react. Now I want to use this Icon so I am using the following syntax : <i className={styles['fa-user-circle']} ></i>
I cant use normal syntax styles.someClassName because of hyphens in the name of fontawesome icons and also I need to combine fas and fa-user-circle classNames . How do I do that?
Thanks.
You can use the FontAwesome React version here
Implementation of it looks like
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome';
import { faPlus } from '#fortawesome/free-solid-svg-icons'
and your render component looks like
export default (props) => {
return (
<div>
<FontAwesomeIcon icon={faPlus} className="pointer" onClick={props.onAdd} id={props.id} />
</div>
)
}
As you can see className we can give so whatever the extra CSS you want to give you can.
if I set up a className for certain components like
<Segment className="Change" color='blue' inverted></Segment>
and in my css I use
.Change:hover{
background-color: black; //or any other change on hover
}
nothing is overriden on the hover.
I have also noticed there are many other components that refuse changes of mine, seemingly randomly. One semantic component will let me change a width the next will not. Is the cause from the same issue? How do I override the color on a hover?
After reviewing the source code of Segment Component (github), I found it has two default classes: segment and ui. In addition, you used two props color=blue and inverted. So I would recommend using the following code.
.ui.segment.blue.inverted.Change:hover {
background-color: black !important;
}
Working DEMO
Choose any color semantic-ui provide for example:
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button color="teal" type="submit">
Sign In
</Button>
</Form>
Your button appears like:
You can add inverted props inside Button component that react semantic-ui provide
<Form>
<Form.Input label="Email" type="email" />
<Form.Input label="Password" type="password" />
<Button inverted color="teal" type="submit">
Sign In
</Button>
</Form>
your component appears like:
On hover returns to basic style opposite of inverted
styled components usage with react semantic ui
I recommended you to use styled-components in order to override semantic-ui component style
import { Tab, Form, Button, Grid, Icon } from "semantic-ui-react";
import styled from "styled-components";
const Mybutton = styled(Button)`
&:hover {
color: #fff !important;
}
`;
Next use your new styled component instead of semantic-ui
<Mybutton inverted color="teal" type="submit">
Sign In
</Mybutton>
Because you didn't provide more code, hard to guess what overriding style you try to change. Try to add !importanant rule to this style.
.Change:hover {
background-color: black !importanant;
}
To avoid !important, which is not always a good solution, add a more specific CSS selector, for exaple Segment.Change:hover.
UPDATE:
Try to remove color='blue' from the template and check if will work with and without !important rule.