I wanted to know if there is some way we can use ::selection in Material-UI.
Code :-
import React from 'react';
import { makeStyles } from '#material-ui/core';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemIcon from '#material-ui/core/ListItemIcon';
import ListItemText from '#material-ui/core/ListItemText';
import InboxIcon from '#material-ui/icons/Inbox';
const styles = makeStyles((theme) => ({
root: {
'&:hover': {
backgroundColor: theme.palette.primary.contrastText,
},
'&:selection': {
backgroundColor: 'tomato',
},
},
}));
const Items: React.FC = () => {
const classes = styles();
return (
<List component='nav' aria-label='management side bar'>
<div className={classes.root}>
<ListItem button>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary='Inbox' />
</ListItem>
</div>
</List>
);
};
export default Items;
I just want to change the color of the background on selecting the List Component, can I do that using the simple '::selection' selector in material-ui?
In your example you are using the hover pseudo-class and the selection pseudo-element
All pseudo-classes are used via : and pseudo-elements via ::
Therefore, your styled code should look like this:
const styles = makeStyles((theme) => ({
root: {
'&:hover': {
backgroundColor: theme.palette.primary.contrastText,
},
'&::selection': {
backgroundColor: 'tomato',
},
},
}));
Related
Hi i'm trying to map Bottom Navigation & change selected color change for component using MUI react. I have mapped as per below answer. I changed background color struck with the selected color change for navigation. Below is my code.what is missing ? Thanks
import React from 'react';
import Box from '#mui/material/Box';
import BottomNavigation from '#mui/material/BottomNavigation';
import BottomNavigationAction from '#mui/material/BottomNavigationAction';
import RestoreIcon from '#mui/icons-material/Restore';
import FavoriteIcon from '#mui/icons-material/Favorite';
import LocationOnIcon from '#mui/icons-material/LocationOn';
export const SimpleBottomNavigation = ({ navicons, }) => {
const [value, setValue] = React.useState(0);
return (
<Box sx={{ width: 500, }}>
<BottomNavigation
showLabels
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
>
{navicons.map((item) => (
<BottomNavigationAction icon={item.icon} label={item.label} />
))}
</BottomNavigation>
</Box>
</ThemeProvider>
);
}
export const LabelBottomNavigation = LabelBottomNavigations.bind({});
MuiBottomNavigation: {
styleOverrides: {
root: {
backgroundColor: "#cccccc",
},
},
},
MuiBottomNavigationAction: {
styleOverrides: {
root: {
color: "red;",
},
},
},
$Muiselected: {
styleOverrides: {
root: {
color: "#ffffff;",
},
},
},
This
<BottomNavigationAction {item.icon}{item.label} />
Should be looking like this
<BottomNavigationAction icon={item.icon} label={item.label} />
Try and let me know
I'm trying to apply background-color when MenuItem component has the selected={true}
also I'd like to apply a style when MenuItem component hovered.
How can I do that?
import * as React from "react";
import Paper from "#mui/material/Paper";
import MenuList from "#mui/material/MenuList";
import Stack from "#mui/material/Stack";
import { MenuItem } from "./styles";
export default function MenuListComposition() {
return (
<Stack direction="row" spacing={2}>
<Paper>
<MenuList>
<MenuItem selected={true}>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem>Logout</MenuItem>
</MenuList>
</Paper>
</Stack>
);
}
styles.js
import styled from "styled-components";
import { default as MuiMenuItem } from "#mui/material/MenuItem";
export const MenuItem = styled(MuiMenuItem)`
.MuiMenuItem-root {
color: blue;
padding: 10px 0;
& .Mui-selected {
background-color: red;
}
&:hover {
background-color: green;
}
}
`;
Solution with styled-components
If you need to use styled-components instead of styled from Mui, you can do it.
export const MenuItem = styled(MuiMenuItem)`
color: blue;
padding: 20px;
&.Mui-selected {
background-color: red;
}
&:hover {
background-color: green;
}
`;
You can fix the problem by importing styled from material and adapt the format, like this:
import { MenuItem as MuiMenuItem, styled } from "#mui/material";
export const MenuItem = styled(MuiMenuItem)({
"&.MuiMenuItem-root": {
color: "blue",
padding: "10px",
"&.Mui-selected": {
backgroundColor: "red"
},
"&:hover": {
backgroundColor: "green"
}
}
});
and then I assume that what you want is to change the color only of the selected MenuItem and you can create the array of objects like in the code so you do not repeat to much code.
import React, { useState } from "react";
import Paper from "#mui/material/Paper";
import MenuList from "#mui/material/MenuList";
import Stack from "#mui/material/Stack";
import { MenuItem } from "./styles";
const ITEMS = [
{ index: 1, title: "Profile" },
{ index: 2, title: "My Account" },
{ index: 3, title: "Logout" }
];
export default function MenuListComposition() {
const [selectedIndex, setSelectedIndex] = useState(1);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
return (
<Stack direction="row" spacing={2}>
<Paper>
<MenuList variant="menu">
{ITEMS.map(({ index, title }) => (
<MenuItem
key={index}
onClick={(event) => handleListItemClick(event, index)}
selected={selectedIndex === index}
>
{title}
</MenuItem>
))}
</MenuList>
</Paper>
</Stack>
);
}
You need to make some configuration changes, because MUI uses 'emotion' as a default style engine, otherwise they would conflict with each other.
https://mui.com/material-ui/guides/styled-engine/#how-to-switch-to-styled-components
here is a working example you need to compare dependencies that are recommended for usage with react
I want change a text color for row, but can't find decision. I tried this code. "color" not working, but "backgroundColor" working.
export const CustomersList = props => {
const DatagridUsersProps = {
rowStyle: (record, index) => {
return {
color: "#FFCC00",
backgroundColor: (record.is_blocked || record['is_deleted']) && "silver",
};
}
};
return (
<List
{...props}
>
<ScrollingWrapper>
<Datagrid {...DatagridUsersProps}>
<TextField source="id" />
<LinkField source="first_name" />
<LinkField source="last_name" />
<EmailField source="email" />
<PhoneField source="phone" />
</Datagrid>
</ScrollingWrapper>
</List>
);
}
Thank you for any sample code or link to do that!
I believe you can override component class using their makeStyle hooks. Find the component class name using inspect element.
const useStyles = makeStyles({
table: {
backgroundColor: 'Lavender',
},
headerCell: {
backgroundColor: 'MistyRose',
}
cell: {
backgroundColor: 'Pink',
}, });
as per their documentation here https://marmelab.com/react-admin/doc/3.19/Theming.html
you may want to override not only the root component style, but also the style of components inside the root. In this case, the className property isn’t enough. You can take advantage of the classes property to customize the classes that the component uses internally.
hope this helps
For decide this problem i used combination of styled components, useStyles and rowStyle for Datagrid.
StyledEmailField.js:
import {makeStyles} from "#material-ui/core/styles";
import {EmailField} from "react-admin";
import React from "react";
import classnames from 'classnames';
const useStyles = makeStyles({
isDeleted: {
textDecoration: "line-through",
},
});
export const DatagridUsersProps = {
rowStyle: (record, index) => {
return {
backgroundColor: (record.is_blocked) && "silver",
color: (record.is_deleted) && "#616161",
};
}
};
export const StyledEmailField = props => {
const classes = useStyles();
return (
<EmailField
className={classnames({
[classes.isDeleted]: props.record.is_deleted,
})}
{...props}
/>
);
};
UseStales.js:
import React from "react";
import {makeStyles} from "#material-ui/core/styles";
export const stylesForUsersList = makeStyles({
root: {
"& td": {
color: 'inherit',
},
"& table": {
color: 'inherit',
},
"& td a, & td a span": {
color: 'inherit',
},
"& td span": {
color: 'inherit',
}
}
});
List.jsx:
import React from "react";
import { List, Datagrid, TextField, EditButton,usePermissions} from 'react-admin';
import { ScrollingWrapper } from '../../../components/ScrollingWrapper';
import { StyledEmailField } from '../../../components/fields/StyledEmailField';
import { CustomersFilter } from './ListFilters';
import {HideBlockUnblockButtonIfDeleted} from '../../../components/toolbars/BlockUnblockButton';
import DeleteRestoreButtons from '../../../components/toolbars/DeleteRestoreButtons';
import {DatagridUsersProps} from "../../../components/_helpers/props/DatagridProps";
import {stylesForUsersList,
} from "../../../components/_helpers/useStyles";
import {UserRole} from "../../../entities";
const defaultSort = { field: 'id', order: 'DESC' };
export const CustomersList = props => {
const classes = stylesForUsersList()
const { permissions } = usePermissions();
if (!permissions) {
return null;
}
return (
<List
{...props}
sort={defaultSort}
exporter={false}
bulkActionButtons={false}
filters={<CustomersFilter />}
perPage={22}
classes={classes}
>
<ScrollingWrapper>
<Datagrid {...DatagridUsersProps}>
<TextField source="id" />
<TextField source="first_name" />
<TextField source="last_name" />
<StyledEmailField source="email" />
<HideBlockUnblockButtonIfDeleted entity={"user"}/>
{(permissions.role === UserRole.admin) &&
<DeleteRestoreButtons/>}
</Datagrid>
</ScrollingWrapper>
</List>
);
}
I have theme like this:
export const Original = createMuiTheme({
palette: {
type: 'light',
primary: {
light: '#b2dfdb',
main: '#26a69a',
dark: '#004d40',
}
}
});
And I use it for this:
<ListItem color = 'primary' button >
<img src={APP} alt='' />
</ListItem>
how can I use the primary-light or primary-dark for ListItem
If you read Material UI documentation. You would know that List & ListItem don't have props color. Thus in order for you to add one or apply any other colors as you wish, you can do something like this:-
App.js (require: ThemeProvider & createMuiTheme from #material-ui/core/styles)
import React from "react";
import { ThemeProvider, createMuiTheme } from "#material-ui/core/styles";
import "./style.css";
import Demo from "./Demo";
export default function App() {
const lightTheme = createMuiTheme({
palette: {
type: "light",
primary: {
light: "#b2dfdb",
main: "#26a69a",
dark: "#004d40"
}
}
});
return (
<ThemeProvider theme={lightTheme}>
<Demo />
</ThemeProvider>
);
}
Demo.js (require: makeStyles or 'useTheme' from #material-ui/stlyes):-
import React from "react";
import { makeStyles, useTheme } from "#material-ui/styles";
import { List, ListItem } from "#material-ui/core";
import "./style.css";
const Demo = () => {
const classes = useStyles();
const theme = useTheme();
return (
<>
<List>
<ListItem className={classes.listItem}>
Using useStyles (classes)
</ListItem>
<ListItem style={{ color: theme.palette.primary.dark }}>
Using inline direct theme
</ListItem>
</List>
<List className={classes.list}>
<ListItem>Having List control over all ListItem styles</ListItem>
</List>
</>
);
};
export default Demo;
const useStyles = makeStyles(theme => ({
listItem: {
color: theme.palette.primary.light
},
list: {
color: theme.palette.primary.main
}
}));
Here are the working sandbox code you can refer to.
I want the primary and secondary text within a ListItemText to both be center-aligned, unlike the question here.
However, after trying alignItems, alignContent, alignSelf, and primaryTypographyProps={{ align: "center" }}, I am stumped.
What's the correct way to go about this?
Below is an example with center-aligned text.
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import List from "#material-ui/core/List";
import ListItem from "#material-ui/core/ListItem";
import ListItemText from "#material-ui/core/ListItemText";
const useStyles = makeStyles(theme => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
const CenteredListItemText = withStyles({
root: {
textAlign: "center"
}
})(ListItemText);
export default function SimpleList() {
const classes = useStyles();
return (
<div className={classes.root}>
<List component="nav" aria-label="main mailbox folders">
<ListItem button>
<CenteredListItemText primary="Inbox" secondary="Inbox secondary" />
</ListItem>
<ListItem button>
<CenteredListItemText primary="Drafts" secondary="Drafts secondary" />
</ListItem>
</List>
</div>
);
}