score:0
using withstyles
- import checkbox (checkbox itself) and formcontrollabel (for name of the checkbox) from material ui
import checkbox from "@material-ui/core/checkbox"; import formcontrollabel from "@material-ui/core/formcontrollabel";
- import withstyles to customize the color and the color red
import { withstyles } from '@material-ui/core/styles'; import { red } from "@material-ui/core/colors";
- customize using withstyles
const redcheckbox = withstyles({ root: { color: red[900], '&$checked': { color: red[200], }, }, checked: {}, })((props) => <checkbox color="default" {...props} />);
- add
redcheckbox
(or the name that you assigned) inside the formcontrollabel
<formcontrollabel control={ <redcheckbox checked={state.checkeda} onchange={handlechange} name="checkeda" /> } label="monday" />
follow this demo for the complete code. (open the demo.js file)
if you don't like the color they offer, you can also customize their color palette. to do that, please refer this link
feel free to comment if you need help.
link to the mui checkbox component -> https://v4.mui.com/components/checkboxes/#checkbox
Source: stackoverflow.com
Related Query
- How can I change the color of the circle of this MUI circular progress
- How can I change the color of MUI styled component?
- how can I change the Checkbox color in Material-UI's Autocomplete?
- How can i change the color of checkbox in MUI?
- How to change the border color of MUI TextField
- How can I customize the color of a Checkbox in MUI?
- How can I change the color of a Link in React with Material-UI?
- (Next.js) How can I change the color of SVG in next/image?
- how can I react-bootstrap change the color of the tabs
- How can I change the color of material-table icons of onRowAdd, onRowUpdate, onRowDelete?
- How can I change the color of the ANT Design's Spin component?
- How can I change the checkbox styles and icons when hover on it in Material-UI React?
- How can I change the underline color of MaterialUI's React Tabs component?
- Material UI: How can I change the border color of the Select component?
- reactstrap - how can I change the color of the <CarouselControl> 's (the small arrows on left/right you click to slide the photos)?
- How do I change the default background color of notistack in MUI v5?
- How to change the background color of MUI Menu Popover of TextField with select property?
- How to change the header color of the MUI accordion to grey?
- How I can change the color of the text of Ant Design TabPane?
- How can I change the focused color of a TextField?
- How can I change the color of an SVG's child dynamically via props?
- How can I change the background color based on a value?
- MUI how can I change the icon inside the TablePagination component?
- how i can display some UI e.g circle and when data arrives i can change the color of specific circle?
- How can I change the background color of elements when they're clicked?
- How can I change the color inside a canvas element according to some data?
- How can I change the color of externally imported SVG in React?
- Using React Big Calendar how can i change the color of the cell that i am pointing
- How can I change the color of the text separately with react hooks?
- How can I do to change the color of the marker?
More Query from same tag
- After clicking button component should render EditChannel Component should render
- Getting an "Access Denied" error when I reload my React app on AWS Amplify
- React/Firebase error: Cannot read property 'database' of undefined
- Prevent browser to scroll up when using visibilityChange event to trigger state update
- Functional component error: Parsing error: Unexpected token, expected ","
- How do I make my custom toolbar button use the form's validation function in react-admin?
- How to catch HTTP response error and then pass to the caller
- fom submit after preventDefault() when using react
- Multiple nested IndexRoutes not registering
- React Native Spash Screen with resize mode 'contain' in app.json
- Remove movement/draggable scroll on google maps react
- Error handling inside JSX map function
- Decide order of CSS Transitions
- React material-table - set row height
- How to create a global 401 unauthroized handler using React + ReactQuery + Axios stack?
- ReactJs : Setstate is not updating the state
- hook change state doesn't update context provider's value?
- How to get index number in child component when use map func in parent component
- ref.current in useEffect deps doesn't work when expected (compared to useCallback ref)
- React Native SectionList scroll to section
- update data in state array on socket event
- How to not display navbar on specific pages?
- Why is react displaying all my components at once?
- Chaining fetchs 'POST' in a React component
- React/JSX dynamic component names
- Redux Not Updating in Component Synchonously
- React axios post request does not send the data
- How can I render component one by one?
- How I can pass the name of list item to another component?
- ReactJS Invalid Checksum