I am trying to set a custom cursor image when hovered on a specific element. I've tried putting my svg icon in src folder and call it in styled components as
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
But it doesn't change the cursor to pen image. I've also tried
cursor: url('images/pen-tool.svg'),
url('images/pen-tool.cur');
cursor: url('images/pen-tool.svg'),
move;
My svg has a width and height defined in it's svg tag but still no work. Am I missing something here ?
You can check my code sandbox sample here
const HStyles = styled.h3`
cursor: url("images/pen-tool.svg");
`;
Styled components is CSS-in-JS. Your can't write declarations like "images/pen-tool.svg" and have to call variable from import.
Just import images/pen-tool.svg and call it like:
import penTool from "./images/pen-tool.svg";
const HStyles = styled.h3`
cursor: url(${HStyles}), auto;
`;
and don't forget "auto"
Related
I am working on Switch component with antd library. I would like to change background of switch, so I have following code:
import styled from 'styled-components';
import { Switch as SwitchhAnt } from 'antd';
export const Button = styled(SwitchhAnt)`
.ant-switch-checked {
background-color: red;
}
`
But switch background does not change at all. I know I can wrap this in some container and it will works but why something like that does not works?
As per how styled components work under the hood,
It creates a unique class name by hashing styles into a seemingly-random string, like dKamQW or iDwMsQ.
Then inject a new CSS class into the page, using that hashed string as its name, and containing all of the CSS declarations from the styles string. You can see that when you inspect switch that different style classes have been applied.
Normal antd Switch
Styled antd Switch
So here you don't need to add the class name used by antd. Just only need to add CSS properties that need to have like below.
export const Button = styled(SwitchAnt)`
background-color: red;
// ....... other styles
`
You can check example codesandbox in here.
You can also refer demystifying-styled-components and how-styled-components-works for more details about what styled components do under the hood.
I am trying to styled Link Component provided by NextJS using Styled-Components.
I have done all the setup including babel-plugin-styled-components, creating _document.js in /pages. But still I am unable to Style the link component.
For setup, I have followed this article: https://medium.com/nerd-for-tech/using-next-js-with-styled-components-easy-dfff3849e4f1
This is working fine
const StyledComponent = Styled.a`
color: red;
`
But this does not
const StyledComponent = Styled(Link)`
color: red;
`
Can anyone pls tell me what am I missing? What has to be done now?
Any help will be appreciated.
The next.js Link doesn't take any styles but you can style the children eg a and add passHref to the Link when using a custom compoment. The styles of the child will be applied to the parent i.e Link. However, you can style the react-router-dom Link, NavLink like what you did above. In next.js you can do it like this
import Link from 'next/link'
const CustomLink = styled.a `
color: white;
background: red;
`
<Link href="/" passHref>
<CustomLink>Home</CustomLink>
</Link>
I would like to know how to apply CSS dynamically to all the elements in a page that belong to a CSS class in React JS?
Currently I am using the following:
document.querySelectorAll('.my-paragraph-class').forEach(function (x: any) {
x.style.fontSize = `${data.value}%`;
});
It works but I would like to know if there is a more efficient way instead of using document.querySelectorAll?
Also when the page loads new text, document.querySelectorAll has to be called again after the text loads, which is not ideal. I would like to know how to persist the modified CSS changes when new text is loaded dynamically?
Thank you in advance
For applying a static font size to a class you shouldn’t have to use JavaScript at all.
In your css file just do:
.my-paragraph-class: {
font-size: 10rem || whatever;
}
To dynamically add styling you could use a CSS in JS tool like styled components. For styled components you would import styled components and then write a code outside of your react function like this:
const StyledParagraph = styled.p`
font-size: 10rem || ${props => props.fontSize}
`
In your JSX you would do something like:
<StyledParagraph fontSize=“10rem”> Filler Text </StyledParagraph>
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 have given className as react-select-container and classNamePrefix as react-select. The styles described in the CSS is getting overwritten by the inbuilt style of the react-select. Image shows react-select__control styles is getting overwritten by the styles of some default class css-yk16xz-control of the react select. i want it to work the other way around and react-select__control styles stay on top and its styles get applied. any suggestions.
render() {
const titleOptions = [{value: 'Dr.', label: 'Dr.'}, {value:'Eng.', label:'Eng.'}, {value:'Officer', label:'Officer'}];
return (
<Select options={titleOptions} autoFocus className="react-select-container" classNamePrefix="react-select" />
)
}
Check Dom structure here
.react-select__control {
border: none;
border-radius: 3px;
}