i'm trying to make a react project with styled components, and i want to use a radio button, but when i try to add css to the radio when it's checked it didn't work as i expected, can you help me?
const RadioGroup = styled.div`
border: solid 3px #332f35;
display: inline-block;
margin: 20px;
border-radius: 10px;
overflow: hidden;
input[type=radio] {
position: absolute;
visibility: hidden;
display: none;
}
label {
color: lighten(#332f35,40%);
display: inline-block;
cursor: pointer;
font-weight: bold;
padding: 5px 20px;
}
input[type=radio]:checked + label{
color: lighten($bg,60%);
background: #ff9000;
}
input[type=radio] + label {
border-left: solid #a1a1a1;
}
`
this is the styled component i'm trying to use in the Radio button, thanks guys!
Related
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;
}
`;
I wrote program using GTK3 with css styling and it works perfect on my KDE.
But problem is that on ubuntu and windows 10 styling only works partially.
I have css file like this:
window {
background-color: white;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-decoration: none;
font-size: 16px;
background-color: #555555;
}
Everything works except changing background of buttons.
It's how I load css:
GtkCssProvider *provider = gtk_css_provider_new ();
gtk_css_provider_load_from_path (provider, "styles.css", NULL);
gtk_style_context_add_provider_for_screen(gdk_screen_get_default(),
GTK_STYLE_PROVIDER(provider),
GTK_STYLE_PROVIDER_PRIORITY_USER);
How can I make it work?
I found solution:
window {
background-color: white;
}
button {
border: none;
padding: 0px;
text-decoration: none;
font-size: 16px;
}
button > label{
padding: 15px 32px;
background-color: #555555;
color: white;
}
You can change by writing css on ~/.config/gtk-3.0/gtk.css.
button.titlebutton.close:backdrop {
background-color: transparent;
}
button.titlebutton.close {
background-color: #theme_selected_bg_color;
}
References:
https://github.com/nana-4/materia-theme/issues/370#issuecomment-481256130
https://asukiaaa.blogspot.com/2022/07/change-color-of-close-button-of-ubuntu2204.html
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 new using styled-components and I been trying to create an input using google material design standards but I haven't been able to recreate the animation that makes the label move when the input is focused.
const Input = styled.input`
font-size: 18px;
padding: 10px 10px 10px 5px;
display: block;
width: 300px;
border: none;
border-bottom: 1px solid #757575;
&:focus {
outline: none;
}
`;
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus & {
top:-20px;
font-size:14px;
color:#5264AE;
}
`;
So in resume, I want the label to move 20px up, change its font-size and color when the label is focused, I'm not really sure if my approach is the correct or it will be better just to implement a normal CSS class in this case.
You are missing the ~ sign to target the label element on input focus
const Label = styled.label`
color: #999;
font-size: 18px;
font-weight: normal;
position: absolute;
pointer-events: none;
left: 5px;
top: 10px;
transition: 0.2s ease all;
${Input}:focus ~ & {
top:-18px;
font-size:14px;
color:#5264AE;
}
`;
Working demo