@mui/material#useTheme JavaScript Examples
The following examples show how to use
@mui/material#useTheme.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Breadcrumb.jsx From matx-react with MIT License | 6 votes |
Breadcrumb = ({ routeSegments }) => {
const theme = useTheme();
const hint = theme.palette.text.hint;
return (
<BreadcrumbRoot>
{routeSegments ? (
<Hidden xsDown>
<BreadcrumbName>{routeSegments[routeSegments.length - 1]['name']}</BreadcrumbName>
<Separator>|</Separator>
</Hidden>
) : null}
<Breadcrumbs
separator={<Icon sx={{ color: hint }}>navigate_next</Icon>}
sx={{ display: 'flex', alignItems: 'center', position: 'relative' }}
>
<NavLink to="/">
<StyledIcon color="primary">home</StyledIcon>
</NavLink>
{routeSegments
? routeSegments.map((route, index) => {
return index !== routeSegments.length - 1 ? (
<NavLink key={index} to={route.path}>
<SubName>{route.name}</SubName>
</NavLink>
) : (
<SubName key={index}>{route.name}</SubName>
);
})
: null}
</Breadcrumbs>
</BreadcrumbRoot>
);
}
Example #2
Source File: MatxSidenav.jsx From matx-react with MIT License | 6 votes |
MatxSidenav = ({ sx, open, children, toggleSidenav, width = '220px' }) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
return (
<Box height="100%" display="flex">
<SideNav sx={sx} width={open || !isMobile ? width : '0px'}>
{children}
</SideNav>
{open && isMobile && <SideNavOverlay onClick={toggleSidenav} />}
</Box>
);
}
Example #3
Source File: Analytics.jsx From matx-react with MIT License | 6 votes |
Analytics = () => {
const { palette } = useTheme();
return (
<Fragment>
<ContentBox className="analytics">
<Grid container spacing={3}>
<Grid item lg={8} md={8} sm={12} xs={12}>
<StatCards />
<TopSellingTable />
<StatCards2 />
<H4>Ongoing Projects</H4>
<RowCards />
</Grid>
<Grid item lg={4} md={4} sm={12} xs={12}>
<Card sx={{ px: 3, py: 2, mb: 3 }}>
<Title>Traffic Sources</Title>
<SubTitle>Last 30 days</SubTitle>
<DoughnutChart
height="300px"
color={[palette.primary.dark, palette.primary.main, palette.primary.light]}
/>
</Card>
<UpgradeCard />
<Campaigns />
</Grid>
</Grid>
</ContentBox>
</Fragment>
);
}
Example #4
Source File: SidenavTheme.jsx From matx-react with MIT License | 5 votes |
SidenavTheme = ({ children }) => {
const theme = useTheme();
const { settings } = useSettings();
const sidenavTheme = settings.themes[settings.layout1Settings.leftSidebar.theme] || theme;
return <ThemeProvider theme={sidenavTheme}>{children}</ThemeProvider>;
}
Example #5
Source File: AppEchart.jsx From matx-react with MIT License | 5 votes |
AppEchart = () => {
const theme = useTheme();
return (
<Container>
<Box className="breadcrumb">
<Breadcrumb routeSegments={[{ name: 'Charts', path: '/charts' }, { name: 'Echarts' }]} />
</Box>
<SimpleCard title="Doughnut Chart">
<DoughnutChart
height="350px"
color={[
theme.palette.primary.dark,
theme.palette.primary.main,
theme.palette.primary.light,
]}
/>
</SimpleCard>
<Box sx={{ py: '12px' }} />
<SimpleCard title="Line Chart">
<LineChart
height="350px"
color={[theme.palette.primary.main, theme.palette.primary.light]}
/>
</SimpleCard>
<Box sx={{ py: '12px' }} />
<SimpleCard title="Comparison Chart">
<ComparisonChart
height="350px"
color={[theme.palette.primary.dark, theme.palette.primary.light]}
/>
</SimpleCard>
<Box sx={{ py: '12px' }} />
<SimpleCard title="Area Chart">
<AreaChart height="350px" color={[theme.palette.primary.main]} />
</SimpleCard>
</Container>
);
}
Example #6
Source File: RowCards.jsx From matx-react with MIT License | 5 votes |
RowCards = () => {
const { palette } = useTheme();
const textMuted = palette.text.secondary;
return [1, 2, 3, 4].map((id) => (
<Fragment key={id}>
<Card sx={{ py: 1, px: 2 }} className="project-card">
<Grid container alignItems="center">
<Grid item md={5} xs={7}>
<Box display="flex" alignItems="center">
<Checkbox />
<Hidden smDown>
{id % 2 === 1 ? (
<StarOutline size="small">
<Icon>star_outline</Icon>
</StarOutline>
) : (
<DateRange size="small">
<Icon>date_range</Icon>
</DateRange>
)}
</Hidden>
<ProjectName>Project {id}</ProjectName>
</Box>
</Grid>
<Grid item md={3} xs={4}>
<Box color={textMuted}>{format(new Date().getTime(), 'MM/dd/yyyy hh:mma')}</Box>
</Grid>
<Hidden smDown>
<Grid item xs={3}>
<Box display="flex" position="relative" marginLeft="-0.875rem !important">
<StyledAvatar src="/assets/images/face-4.jpg" />
<StyledAvatar src="/assets/images/face-4.jpg" />
<StyledAvatar src="/assets/images/face-4.jpg" />
<StyledAvatar sx={{ fontSize: '14px' }}>+3</StyledAvatar>
</Box>
</Grid>
</Hidden>
<Grid item xs={1}>
<Box display="flex" justifyContent="flex-end">
<IconButton>
<Icon>more_vert</Icon>
</IconButton>
</Box>
</Grid>
</Grid>
</Card>
<Box py={1} />
</Fragment>
));
}
Example #7
Source File: StatCards2.jsx From matx-react with MIT License | 5 votes |
StatCards2 = () => {
const { palette } = useTheme();
const textError = palette.error.main;
const bgError = lighten(palette.error.main, 0.85);
return (
<Grid container spacing={3} sx={{ mb: 3 }}>
<Grid item xs={12} md={6}>
<Card elevation={3} sx={{ p: 2 }}>
<ContentBox>
<FabIcon size="medium" sx={{ background: 'rgba(9, 182, 109, 0.15)' }}>
<Icon sx={{ color: '#08ad6c' }}>trending_up</Icon>
</FabIcon>
<H3 textcolor={'#08ad6c'}>Active Users</H3>
</ContentBox>
<ContentBox sx={{ pt: 2 }}>
<H1>10.8k</H1>
<IconBox sx={{ background: 'rgba(9, 182, 109, 0.15)' }}>
<Icon className="icon">expand_less</Icon>
</IconBox>
<Span textcolor={'#08ad6c'}>(+21%)</Span>
</ContentBox>
</Card>
</Grid>
<Grid item xs={12} md={6}>
<Card elevation={3} sx={{ p: 2 }}>
<ContentBox>
<FabIcon size="medium" sx={{ background: bgError, overflow: 'hidden' }}>
<Icon sx={{ color: textError }}>star_outline</Icon>
</FabIcon>
<H3 textcolor={textError}>Transactions</H3>
</ContentBox>
<ContentBox sx={{ pt: 2 }}>
<H1>$2.8M</H1>
<IconBox sx={{ background: bgError }}>
<Icon className="icon">expand_less</Icon>
</IconBox>
<Span textcolor={textError}>(+21%)</Span>
</ContentBox>
</Card>
</Grid>
</Grid>
);
}
Example #8
Source File: TopSellingTable.jsx From matx-react with MIT License | 5 votes |
TopSellingTable = () => {
const { palette } = useTheme();
const bgError = palette.error.main;
const bgPrimary = palette.primary.main;
const bgSecondary = palette.secondary.main;
return (
<Card elevation={3} sx={{ pt: '20px', mb: 3 }}>
<CardHeader>
<Title>top selling products</Title>
<Select size="small" defaultValue="this_month">
<MenuItem value="this_month">This Month</MenuItem>
<MenuItem value="last_month">Last Month</MenuItem>
</Select>
</CardHeader>
<Box overflow="auto">
<ProductTable>
<TableHead>
<TableRow>
<TableCell sx={{ px: 3 }} colSpan={4}>
Name
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={2}>
Revenue
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={2}>
Stock Status
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={1}>
Action
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{productList.map((product, index) => (
<TableRow key={index} hover>
<TableCell colSpan={4} align="left" sx={{ px: 0, textTransform: 'capitalize' }}>
<Box display="flex" alignItems="center">
<Avatar src={product.imgUrl} />
<Paragraph sx={{ m: 0, ml: 4 }}>{product.name}</Paragraph>
</Box>
</TableCell>
<TableCell align="left" colSpan={2} sx={{ px: 0, textTransform: 'capitalize' }}>
${product.price > 999 ? (product.price / 1000).toFixed(1) + 'k' : product.price}
</TableCell>
<TableCell sx={{ px: 0 }} align="left" colSpan={2}>
{product.available ? (
product.available < 20 ? (
<Small bgcolor={bgSecondary}>{product.available} available</Small>
) : (
<Small bgcolor={bgPrimary}>in stock</Small>
)
) : (
<Small bgcolor={bgError}>out of stock</Small>
)}
</TableCell>
<TableCell sx={{ px: 0 }} colSpan={1}>
<IconButton>
<Icon color="primary">edit</Icon>
</IconButton>
</TableCell>
</TableRow>
))}
</TableBody>
</ProductTable>
</Box>
</Card>
);
}
Example #9
Source File: SimpleSnackbar.jsx From matx-react with MIT License | 5 votes |
export default function SimpleSnackbar() {
const theme = useTheme();
const [open, setOpen] = useState(false);
function handleClick() {
setOpen(true);
}
function handleClose(_, reason) {
if (reason === "clickaway") {
return;
}
setOpen(false);
}
return (
<Box>
<Button onClick={handleClick}>Open simple snackbar</Button>
<Snackbar
anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
open={open}
autoHideDuration={6000}
onClose={handleClose}
ContentProps={{ "aria-describedby": "message-id" }}
message={<span id="message-id">Note archived</span>}
action={[
<Button key="undo" color="secondary" size="small" onClick={handleClose}>
UNDO
</Button>,
<IconButton
key="close"
aria-label="Close"
color="inherit"
onClick={handleClose}
sx={{ padding: theme.spacing(0.5) }}
>
<CloseIcon />
</IconButton>,
]}
/>
</Box>
);
}
Example #10
Source File: Chatbox.jsx From matx-react with MIT License | 4 votes |
Chatbox = ({ togglePopup }) => {
const [isAlive, setIsAlive] = useState(true);
const [message, setMessage] = useState('');
const [messageList, setMessageList] = useState([]);
const currentUserId = '7863a6802ez0e277a0f98534';
const chatBottomRef = document.querySelector('#chat-scroll');
const sendMessageOnEnter = (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
let tempMessage = message.trim();
if (tempMessage !== '') {
let tempList = [...messageList];
let messageObject = {
text: tempMessage,
contactId: currentUserId,
};
tempList.push(messageObject);
globalMessageList.push(messageObject);
if (isAlive) setMessageList(tempList);
dummyReply();
}
setMessage('');
}
};
const dummyReply = async () => {
setTimeout(() => {
let tempList = [...messageList];
let messageObject = {
text: 'Good to hear from you. enjoy!!!',
contactId: 'opponents contact id',
avatar: '/assets/images/faces/13.jpg',
name: 'Frank Powell',
};
tempList.push(messageObject);
globalMessageList.push(messageObject);
if (isAlive) setMessageList(globalMessageList);
}, 2000);
};
const scrollToBottom = useCallback(() => {
if (chatBottomRef) {
chatBottomRef.scrollTo({
top: chatBottomRef.scrollHeight,
behavior: 'smooth',
});
}
}, [chatBottomRef]);
useEffect(() => {
if (isAlive) {
setMessageList([
{
contactId: '323sa680b3249760ea21rt47',
text: 'Do you ever find yourself falling into the “discount trap?”',
time: '2018-02-10T08:45:28.291Z',
id: '323sa680b3249760ea21rt47',
name: 'Frank Powell',
avatar: '/assets/images/faces/13.jpg',
status: 'online',
mood: '',
},
{
contactId: '7863a6802ez0e277a0f98534',
text: 'Giving away your knowledge or product just to gain clients?',
time: '2018-02-10T08:45:28.291Z',
id: '7863a6802ez0e277a0f98534',
name: 'John Doe',
avatar: '/assets/images/face-1.jpg',
status: 'online',
mood: '',
},
{
contactId: '323sa680b3249760ea21rt47',
text: 'Yes',
time: '2018-02-10T08:45:28.291Z',
id: '323sa680b3249760ea21rt47',
name: 'Frank Powell',
avatar: '/assets/images/faces/13.jpg',
status: 'online',
mood: '',
},
{
contactId: '7863a6802ez0e277a0f98534',
text: 'Don’t feel bad. It happens to a lot of us',
time: '2018-02-10T08:45:28.291Z',
id: '7863a6802ez0e277a0f98534',
name: 'John Doe',
avatar: '/assets/images/face-1.jpg',
status: 'online',
mood: '',
},
{
contactId: '323sa680b3249760ea21rt47',
text: 'Do you ever find yourself falling into the “discount trap?”',
time: '2018-02-10T08:45:28.291Z',
id: '323sa680b3249760ea21rt47',
name: 'Frank Powell',
avatar: '/assets/images/faces/13.jpg',
status: 'online',
mood: '',
},
{
contactId: '7863a6802ez0e277a0f98534',
text: 'Giving away your knowledge or product just to gain clients?',
time: '2018-02-10T08:45:28.291Z',
id: '7863a6802ez0e277a0f98534',
name: 'John Doe',
avatar: '/assets/images/face-1.jpg',
status: 'online',
mood: '',
},
{
contactId: '323sa680b3249760ea21rt47',
text: 'Yes',
time: '2018-02-10T08:45:28.291Z',
id: '323sa680b3249760ea21rt47',
name: 'Frank Powell',
avatar: '/assets/images/faces/13.jpg',
status: 'online',
mood: '',
},
{
contactId: '7863a6802ez0e277a0f98534',
text: 'Don’t feel bad. It happens to a lot of us',
time: '2018-02-10T08:45:28.291Z',
id: '7863a6802ez0e277a0f98534',
name: 'John Doe',
avatar: '/assets/images/face-1.jpg',
status: 'online',
mood: '',
},
]);
}
// getChatRoomByContactId(currentUserId, "323sa680b3249760ea21rt47").then(
// ({ data }) => {
// if (isAlive) {
// setMessageList(data?.messageList);
// }
// }
// );
}, [isAlive]);
useEffect(() => {
scrollToBottom();
return () => setIsAlive(false);
}, [messageList, scrollToBottom]);
const { palette } = useTheme();
const primary = palette.primary.main;
const textPrimary = palette.text.primary;
return (
<ChatContainer>
<ProfileBox>
<Box display="flex" alignItems="center">
<ChatAvatar src="/assets/images/face-2.jpg" status="online" />
<ChatStatus>
<H5>Ryan Todd</H5>
<Span>Active</Span>
</ChatStatus>
</Box>
<IconButton onClick={togglePopup}>
<Icon fontSize="small">clear</Icon>
</IconButton>
</ProfileBox>
<StyledScrollBar id="chat-scroll">
{messageList.map((item, ind) => (
<Box
key={ind}
p="20px"
display="flex"
sx={{
justifyContent: currentUserId === item.contactId && 'flex-end',
}}
>
{currentUserId !== item.contactId && <Avatar src={item.avatar} />}
<Box ml="12px">
{currentUserId !== item.contactId && (
<H5
sx={{
mb: '4px',
fontSize: '14px',
color: primary,
}}
>
{item.name}
</H5>
)}
<ChatMessage>{item.text}</ChatMessage>
<MessageTime>1 minute ago</MessageTime>
</Box>
</Box>
))}
{/* example of image sent by current user*/}
<ChatImgContainer>
<Box ml="12px">
<ChatImgBox>
<ChatImg alt="laptop" src="/assets/images/laptop-1.png" />
<Box ml="12px">
<H6 sx={{ mt: 0, mb: '4px' }}>Asus K555LA.png</H6>
<ChatImgSize>21.5KB</ChatImgSize>
</Box>
</ChatImgBox>
<MessageTime>1 minute ago</MessageTime>
</Box>
</ChatImgContainer>
</StyledScrollBar>
<div>
<Divider
sx={{
background: `rgba(${convertHexToRGB(textPrimary)}, 0.15)`,
}}
/>
<TextField
placeholder="Type here ..."
multiline
rowsMax={4}
fullWidth
sx={{ '& textarea': { color: primary } }}
InputProps={{
endAdornment: (
<Box display="flex">
<IconButton size="small">
<Icon>tag_faces</Icon>
</IconButton>
<IconButton size="small">
<Icon>attachment</Icon>
</IconButton>
</Box>
),
classes: { root: 'pl-5 pr-3 py-3 text-body' },
}}
value={message}
onChange={(e) => setMessage(e.target.value)}
onKeyUp={sendMessageOnEnter}
/>
</div>
</ChatContainer>
);
}
Example #11
Source File: MatxCustomizer.jsx From matx-react with MIT License | 4 votes |
MatxCustomizer = () => {
const theme = useTheme();
const [open, setOpen] = useState(false);
const [tabIndex, setTabIndex] = useState(0);
const { settings, updateSettings } = useSettings();
const secondary = theme.palette.text.secondary;
const tooglePanel = () => setOpen(!open);
const handleTabChange = (index) => setTabIndex(index);
let activeTheme = { ...settings.themes[settings.activeTheme] };
return (
<Fragment>
<Tooltip title="Theme Settings" placement="left">
<Label className="open" onClick={tooglePanel}>
DEMOS
</Label>
</Tooltip>
<ThemeProvider theme={activeTheme}>
<Drawer
open={open}
anchor="right"
variant="temporary"
onClose={tooglePanel}
ModalProps={{ keepMounted: true }}
>
<MaxCustomaizer>
<Controller>
<Box display="flex">
<Icon className="icon" color="primary">
settings
</Icon>
<H5 sx={{ ml: 1, fontSize: '1rem' }}>Theme Settings</H5>
</Box>
<IconButton onClick={tooglePanel}>
<Icon className="icon">close</Icon>
</IconButton>
</Controller>
<Box px={3} mb={2} display="flex">
<Button
variant="outlined"
onClick={() => handleTabChange(0)}
color={tabIndex === 0 ? 'secondary' : 'primary'}
sx={{ mr: 2 }}
>
Demos
</Button>
<Button
variant="outlined"
onClick={() => handleTabChange(1)}
color={tabIndex === 1 ? 'secondary' : 'primary'}
>
Settings
</Button>
</Box>
<StyledScrollBar options={{ suppressScrollX: true }}>
{tabIndex === 0 && (
<Box sx={{ mb: 4, mx: 3 }}>
<Box sx={{ color: secondary }}>Layouts</Box>
<Box display="flex" flexDirection="column">
{demoLayouts.map((layout) => (
<LayoutBox
key={layout.name}
color="secondary"
badgeContent={'Pro'}
invisible={!layout.isPro}
>
<Card
elevation={4}
sx={{ position: 'relative' }}
onClick={() => updateSettings(layout.options)}
>
<Box sx={{ overflow: 'hidden' }} className="layout-name">
<Button variant="contained" color="secondary">
{layout.name}
</Button>
</Box>
<IMG src={layout.thumbnail} alt={layout.name} />
</Card>
</LayoutBox>
))}
</Box>
</Box>
)}
{/* END LAYOUT */}
{tabIndex === 1 && (
<div>
<div className="helpText">
We used React context API to control layout. Check out the{' '}
<Link href="http://demos.ui-lib.com/matx-react-doc/layout.html" target="_blank">
Documentation
</Link>
</div>
</div>
)}
</StyledScrollBar>
</MaxCustomaizer>
</Drawer>
</ThemeProvider>
</Fragment>
);
}