I have global styles for scroll.Look at the image pls
enter image description here
my scroll is out of bounds and i want to add margin or padding.
body ::-webkit-scrollbar {
margin-right:6px;//not working
padding:6px;//not working
}
body ::-webkit-scrollbar-track {
margin-right:6px;//not working
padding:6px;//not working
}
but this is only a problem inside mui select
export const GlobalStyle = createGlobalStyle`
body ::-webkit-scrollbar {
width: 6px;
}
body ::-webkit-scrollbar-track {
background-color: transparent;
}
body ::-webkit-scrollbar-thumb {
background-color: ${theme.colors.asphaltSuperLight};
outline: 1px solid transparent;
border-radius: 5px;
:hover {
background-color: ${theme.colors.asphalt};
}
:active {
background-color: ${theme.colors.wetAsphalt};
}
}
`;
How do I change the text color of the header and also for the content which is ant-collapse-content. I'm styling the AntCollapse using Styled and here's my code:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
I tried using :global for both content and header but it didnt work as well.
try:
const StyledCollapse = styled(AntCollapse)`
&&& {
border: none;
border-radius: 0px;
box-shadow: none;
background: #0e0304;
}
&.ant-collapse-content {
fontSize: 25px;
color: #fff;
}
&.ant-collapse-header {
fontSize: 25px;
color: #fff;
}
`;
This is my first time using styledComponent.
Can someone tell me why my hover effect on SubmitBtn not working.
I just want to add hover effect on the submit button.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
<SubmitBtn>Submit Book</SubmitBtn>
I have taken the SubmitBtn out of component, and now it works.
You have to return/render the component.
import styled from 'styled-components';
const SubmitBtn = styled.button`
width: 50%;
padding: 14px 20px;
margin: 8px 0;
display: inline-block;
border: none;
borderRadius: 4px;
cursor: pointer;
background: green;
color: white;
&:hover {
background: darkgreen;
color: grey;
}
`
export const App = () => <SubmitBtn>Submit Book</SubmitBtn>
I'm trying to make the parent background color stay changed on hover as I continue to hover over the dropdown items.
https://zqy0v.csb.app/dropdowns < dropdown
import React from "react";
import styled from "styled-components";
//============================================ styles =============================================
const DivDropdownContent = styled.div`
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 24.7rem;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
`;
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover ${DivDropdownContent} {
display: block;
}
`;
const SpanDropdownTitle = styled.div`
font-size: 1.6rem;
font-weight: bold;
padding: 2rem 6rem;
border-radius: 0.6rem;
border: 1px solid black;
&:hover {
cursor: pointer;
}
`;
const ItemDropdown = styled.p`
padding: 1rem;
&:hover {
cursor: pointer;
background: lightgray;
}
`;
//=========================================== component ===========================================
const BasicDropdown = props => {
return (
<DivDropdown>
<SpanDropdownTitle>Basic Dropdown</SpanDropdownTitle>
<DivDropdownContent>
<ItemDropdown>Item 1</ItemDropdown>
<ItemDropdown>Item 2</ItemDropdown>
<ItemDropdown>Item 3</ItemDropdown>
</DivDropdownContent>
</DivDropdown>
);
};
export default BasicDropdown;
Basically I would like the background color to stay changed for the parent while hovering over the child items in the dropdown, much like is done here https://woocommerce.com/
Is there an easy way to do this, or do I have to start getting complicated with using state and onPointerEnter and onPointerLeave?
I finally ended up finding the solution, and am a bit embarrassed.
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover ${DivDropdownContent} {
display: block;
}
`;
The Issue: ^This was only targeting the nested component when I added the background cover to the hover.
const DivDropdown = styled.div`
position: relative;
display: inline-block;
&:hover {
background: lightgray;
}
&:hover ${DivDropdownContent} {
display: block;
}
`;
The Fix: ^By adding the above, I was able to correct the behavior.
I'm going to leave this question up, because I wasn't able to find much tutorials on this through my internet searching. I think this is a fairly clean solution and think it will help others searching.
I'm currently trying to create an animation on an H2, using the pseudos ::before and after. But the ::before and ::after are not showing in my HTML.
What am I doing wrong here? Looking at styled components docs this should just work. I'm aware of the weird animation function. But this does not have any influence in the before after. I already completely removed it but it still doesn't render.
import React from 'react'
import styled, { keyframes, css } from 'styled-components'
import PropTypes from 'prop-types'
const Wrapper = styled.h2`
position: relative;
font-size: 1.5rem;
color: #ffffff;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.01em;
transform: scale3d(1,1,1);
opacity: 1;
&::before, &::after{
content: ${(props) => props.text};
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background: #333333;
color: #ffffff;
clip: rect(0, 900px, 0, 0);
}
&::before {
left: 7px;
text-shadow: 1px 0 green;
animation: ${glitchEffect} 3s infinite linear alternate-reverse;
}
&::after {
left: 3px;
text-shadow: -1px 0 red;
animation: ${glitchEffect} 2s infinite linear alternate-reverse;
}
`
const glitchEffect = keyframes`
${setInterval(createAnimation, 200)}
`
function createAnimation(){
const single = `clip: rect(${(Math.floor(Math.random() * 100 + 1))}px, 9999px, ${(Math.floor(Math.random() * 100 + 1))}px, 0);`
return css`${single}`
}
export default function Glitch({ text }){
return (
<Wrapper text={text}>{text}</Wrapper>
)
}
Glitch.propTypes = {
text: PropTypes.string.isRequired
}
A few things:
content: ${(props) => props.text}; wouldn't work, you need to add double quotes around the text like so content: "${(props) => props.text}";
The second issue is setInterval(createAnimation, 200). This will return an integer (a handle to the interval that you've just created). This will be needed to clear the interval once you're done with the animation for example.
If what you want to do is to generate a some keyframes, then you need to call createAnimation manually like so
import React from "react";
import styled, { keyframes, css } from "styled-components";
const glitchEffect = keyframes`
from {
${createAnimation()}
}
to {
${createAnimation()}
}
`;
const Wrapper = styled.h2`
position: relative;
font-size: 1.5rem;
color: #ffffff;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.01em;
transform: scale3d(1, 1, 1);
opacity: 1;
> .before,
> .after {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background: #333333;
color: #ffffff;
clip: rect(0, 900px, 0, 0);
}
> .before {
left: 7px;
text-shadow: 1px 0 green;
animation: ${glitchEffect} 3s infinite linear alternate-reverse;
}
> .after {
left: 3px;
text-shadow: -1px 0 red;
animation: ${glitchEffect} 2s infinite linear alternate-reverse;
}
`;
function createAnimation() {
const single = `clip: rect(${Math.floor(
Math.random() * 100 + 1
)}px, 9999px, ${Math.floor(Math.random() * 100 + 1)}px, 0);`;
return css`
${single}
`;
}
export default function Glitch({ text }) {
return (
<Wrapper>
<div className="before">{text}</div>
{text}
<div className="after">{text}</div>
</Wrapper>
);
}
If you want to generate random animation, then you'll need to create the interval from Glitch
// First transform your "animation: ${glitchEffect} 3s infinite linear alternate-reverse;"
// into a "transition: text-shadow 500ms linear;"
// Since we're manually changing its value
import React, { useState, useEffect } from "react";
import styled from "styled-components";
import PropTypes from "prop-types";
const Wrapper = styled.h2`
position: relative;
font-size: 1.5rem;
color: #ffffff;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.01em;
transform: scale3d(1, 1, 1);
opacity: 1;
> .before,
> .after {
position: absolute;
top: 0;
left: 0;
right: 0;
overflow: hidden;
background: #333333;
color: #ffffff;
}
> .before {
left: 7px;
text-shadow: 1px 0 green;
transition: clip 300ms linear;
}
> .after {
left: 3px;
text-shadow: -1px 0 red;
transition: clip 200ms linear;
}
`;
function createAnimation() {
return {
clip: `rect(${Math.floor(Math.random() * 100 + 1)}px, 9999px, ${Math.floor(
Math.random() * 100 + 1
)}px, 0)`
};
}
export default function Glitch({ text }) {
const [glitchEffect, setGlitchEffect] = useState(createAnimation());
useEffect(() => {
const interval = setInterval(() => setGlitchEffect(createAnimation()), 500);
return () => {
clearInterval(interval);
};
}, []);
// now pass glitchEffect to a "style" prop to your pseudo elements
// See https://stackoverflow.com/a/28269950/3877913
return (
<Wrapper>
<div className="before" style={glitchEffect}>
{text}
</div>
{text}
<div className="after" style={glitchEffect}>
{text}
</div>
</Wrapper>
);
}