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};
}
}
`;
Related
someone can tell me why even when my input have no autofill by chrome or a value by the user, my label still on the top and not inside of the input?
my label styled-component
export const InputLabel = styled.label`
${({ theme }) => css`
font-size: large;
position: absolute;
pointer-events: none;
color:${theme.colors.primaryColor};
left:5px;
top: 16px;
bottom:50%;
transition: all 300ms ease-in-out;
`}
`;
my input styled component
export const InputText = styled.input`
${({ theme }) => css`
width: 100%;
color:${theme.colors.tertiary};
background: ${theme.colors.mediumGray};
border: none;
border-radius: 5px;
padding: 20px;
&::placeholder {
visibility: hidden;
opacity: 0;
}
&:focus{
outline: none;
}
&:focus
+ ${InputLabel},
&:not(:placeholder-shown)
+ ${InputLabel},
&:-webkit-autofill
+ ${InputLabel} {
filter: none;
left:1px;
top: -3rem;
color:${theme.colors.tertiary}
}
`}
`;
i tried to remove this line of code
+ ${InputLabel},
&:not(:placeholder-shown)
from the InputText, but when i write something and do not use the autofill, the label come down again and mix with the value write in the input.
someone know's what i'm doing wrong?
I'm trying to apply a global stylesheet to my React project, which will change the highlight color from the default blue.
However, I can't figure out how to use the ::selection pseudoelement with styled components.
const GlobalStyle = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#300;400;700&display=swap');
* {
/* border: 1px solid blue; */
}
html {
font-size: 62.5%; // sets 1rem = 10px
padding: 0;
margin: 0;
&::selection,
&::-moz-selection {
color: red;
background-color: yellow;
}
}
Figured it out, the ::selection pseudoelement should be at the root level
const GlobalStyle = createGlobalStyle`
#import url('https://fonts.googleapis.com/css2?family=Manrope:wght#300;400;700&display=swap');
* {
/* border: 1px solid blue; */
}
html {
font-size: 62.5%; // sets 1rem = 10px
padding: 0;
margin: 0;
}
::selection, {
color: red;
background-color: yellow;
}
I need help with hover in styled components. If hover is in component and affect that component, that work. But if hover is in component and affect another component, not working.
DropDownContent not show on DropDownLi:hover.
export const DropDownLi = styled(StyledLi)`
display: inline-block;
&:hover {
color: red;
}
`;
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
${DropDownLi}:hover & {
display: block;
}
/* not show on hover */
`;
Not working in next example.
export const DropDownLi = styled(StyledLi)`
display: inline-block;
&:hover ${DropDownContent} {
color: red;
}
`;
<StyledUl>
<DropDownLi>$ Currency</DropDownLi>
<DropDownContent>dvsdv</DropDownContent>
<DropDownLi>English</DropDownLi>
<StyledLi>Login</StyledLi>
</StyledUl>
Try to remove &:
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
${DropDownLi}:hover {
display: block;
}
/* not show on hover */
`;
I found a solution for this problem. The code that works is below.
<StyledUl>
<DropDownLi>
$ Currency
<DropDownContent>dvsdv</DropDownContent>
</DropDownLi>
</StyledUl>
export const StyledLi = styled.li`
float: left;
cursor: pointer;
`;
export const DropDownContent = styled.div`
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
`;
export const DropDownLi = styled(StyledLi)`
display: inline-block;
`;
export const StyledUl = styled.ul`
list-style-type: none;
margin: 0;
overflow: hidden;
color: black;
${DropDownLi}:hover > ${DropDownContent} {
display: block;
}
`;
I have this 2 styled components
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
`
export const Dots = styled.div`
border: 2px solid green !imporant;
height: 30px;
background: white;
width: 16px;
height: 16px;
border: solid 1px #d2d2d2;
border-radius: 20px;
top: 25px;
position: relative;
${Icon}: hover {
background:black;
}
}
`
I want to display Icon on the hover of this div but i dont understand why it is not working,
Any suggestions please?
There is no problem with your code except on hover you don't change the color from its default value black
const Icon = styled.div`
width: 100px;
height: 100px;
background: black;
`;
export const Dots = styled.div`
${Icon}:hover {
background: red;
}
`;
export default function App() {
return (
<Dots>
<Icon />
</Dots>
);
}
https://codesandbox.io/s/styled-react-template-forked-nzwm8
You should place the hover styles inside the icon
export const Icon = styled.svg`
width: 8px;
height: 8px;
background: black;
&:hover {
background: black;
}
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.