score:1
Accepted answer
you can't use the bubbling stage
in css like also styled-components
. but you can get event from input
and then pass in styled-component
. example
import { usestate } from "react";
import styled from "styled-components";
const label = styled.label`
background: ${({ checked }) => (checked ? "blue" : "red")};
display: block;
padding: 1rem;
`;
const input = styled.input`
/* &:checked + ${label} {
background: blue;
} */
`;
export default function app() {
const [checked, setchecked] = usestate(false);
const toggle = () => setchecked(!checked);
return (
<div classname="app">
<label for="input" checked={checked}>
<input id="input" type="checkbox" onchange={toggle} />
</label>
</div>
);
}
Source: stackoverflow.com
Related Query
- How to style a label when input inside it is checked?
- how to change label color when input field is focus in react js
- react-autosuggest how to style input and autosuggestion when using along with Material-ui
- In a Material-UI TextField how can I prevent a label from falling behind an adornment when the input is blurred?
- How to update a useState which has an array, inside this array I have objects this objects will update when the input value will change in react js
- How to change the inputted text's style inside an input element using Styled Components - React
- How do I target a span within a label element when a checkbox is checked using React Material UI createStyles?
- How to change state value when input is checked with useState hook
- How to stop displaying error when data inside text input was set like this: value={value} React Hook Form
- I want to call the same popup with input fields when I click on edit button which is inside that popup, how can I do this (if possible)?
- How to set a label value inside the input filed with a datalist
- React - How to change input values inside loop when state change
- How can I create a dynamic input field that will update width based on a label inside the input
- How do I style an elements inside the navlinks when the navlinks got activated?
- How to disable a button when an input is empty?
- How to select all text in input with Reactjs, when it focused?
- React prevent form submission when enter is pressed inside input
- How do you change a style of a child when hovering over a parent using MUI styles?
- How do I see state when logging to the console instead of Proxy object inside reducer action?
- Invalid hook call. Hooks can only be called inside of the body of a function component when apply style to class base component with material-ui
- How to test which input has the focus when tab button is pressed
- How to Lazy load the background image inside the inline style property (React)?
- How to style input tag without class with JSS
- How to avoid setState() inside render() when state depends on render
- How to enable Ctrl + Z when you change an input text dynamically with React?
- How do I style react-table filter input field?
- MaterialUI how to align text inside an Input to the right or center?
- How can I override the style of the Material-UI switch component when checked?
- React: How to add onChange functionality inside of Function component using React Hooks? Need onClick event from a checkbox to influence input state
- How to style Link component when on active page on Next.js
More Query from same tag
- Unable to set Auth Headers using Apollo Client 3 and setContext (apollo-link-context)
- material-table How to do selectable and editable table?
- In React.js, how would I render a component from a string representation of a component?
- Programatically setting route params in React-Router V4 ends up in 'Page not found'
- Include two javascript code in one html tag : jsx syntax problem
- get selected file object with react-hook-form
- How can I contain a text node taller than its parent container inside it?
- Get single data from state in React
- React - Set component state from external script
- facing fs-extra, html-webpack-plugin-before-html-processing, graceful-js issues when starting react app
- How can I add this main js to the template tags without it throwing a tag error?
- how to wrap a funtion inside a funtion in a single line to pass an arguments without executing it
- How to correctly send base64 encoded document from express to the client and initiate download?
- How to support react js app for 2 different sub domains
- How to convert a string into JSX in React 17
- React: Why the onChange event does not trigger?
- ReactJS - As can I generate several form fields with value properties sharing the same names but not the same values?
- Redirect doesn;t work, while {this.props.history} does
- Is there a way to append dynamically to a <ul></ul> in reactJS
- Creating controlled input in react
- How to store a value in an array without deleting the previous value
- axios.delete is removing all nodes from firebase database
- Styling Scrollbar of the modal inside reactjs-popup
- How to set a select value when the page loads in react
- Copy object from one array of objects to another in React
- Using nested objects in redux initial state and reducers
- Redux form problem (dispatch not working?)
- React Component not rendered properly with Turbolinks in Rails 5.1
- useEffect dosn't save data in localstorage
- Slate JS: set the prop as the Editor's value