Matarial ui theming tablecell text color variants - material-ui

I have a table with information.
The text color of the row depends on a error level.
Now a separate function is used to define the text color. How can this be done with Material UI theming?
The function to determine the text color:
function getColor(priority: MessagePriority) {
if (priority <= InfoPriority.error) {
return 'red';
}
if (priority <= InfoPriority.notice) {
return 'orange';
}
return 'black';
}
snippet of code where the table is defined:
<div
style={{
right: '0',
top: '35px',
left: '1px',
position: 'absolute',
}}
>
<Table stickyHeader size="small" aria-label="sticky table">
<TableHead>
<TableRow>
<TableCell variant="head">Level</TableCell>
<TableCell variant="head">Summary</TableCell>
</TableRow>
</TableHead>
<TableBody ref={body}>
{information.map((item, index) => (
<TableRow
key={index}
sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
>
<TableCell
style={{
margin: '0',
color: getColor(item.priority),
}}
>
{ InformationPriority[item.priority]}
</TableCell>
<TableCell
style={{
margin: '0',
color: getColor(item.priority),
}}
>
{item.summary}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
I thought to use something like theme.palette.error.main in the function , but theme could not be found.
Another option is the define the text color for the when adjusting on level is not possible.

Related

Material UI Popover only hides when clicking away

I need some help...
I'm working with a material UI Popover: currently, it shows when hovering over a certain place and it will only hide when clicking anywhere away from it. I want it to hide automatically as soon as my mouse isn't hovering anymore.
Can you tell me what's wrong with my code?
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const openModal = Boolean(anchorEl);
const id = openModal ? "simple-popover" : undefined;
const handleClick = (event: any, params: any) => {
setOrganization({...params});
setAnchorEl(event.currentTarget);
console.log("hola", "Hola")
};
const handlePopover = () => {
setAnchorEl(null);
setOrganization({ idor: null });
};
<Grid container direction="column" height="60%">
<Grid item container justifyContent="center">
<Badge
style={{ cursor: "pointer" }}
badgeContent={params.row.active ? "Active" : "Inactive"}
color={params.row.active ? "success" : "error"}
onMouseEnter={(e: any) => handleClick(e, params.row)}
/>
<Popover
id={id}
onExit={handlePopover}
open={openModal}
anchorEl={anchorEl}
onClose={handlePopover}
anchorOrigin={{
vertical: "bottom",
horizontal: "center",
}}
transformOrigin={{
vertical: "top",
horizontal: "center",
}}
>
<Grid container justifyContent="center">
<Tooltip title="View Window">
<IconButton
onClick={() => handleToOrganization(params.row, "view")}
style={{ marginLeft: 16 }}
>
<LaunchOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Edit">
<IconButton
onClick={() => handleToOrganization(params.row, "edit")}
style={{ marginLeft: 16 }}
>
<EditOutlinedIcon />
</IconButton>
</Tooltip>
<Tooltip title="Delete">
<IconButton
onClick={() => handleOpen()}
style={{ marginLeft: 16 }}
>
<DeleteOutlineOutlinedIcon />
</IconButton>
</Tooltip>
</Grid>
</Popover>
</Grid>
</Grid>```
Thank you in advance! :)

Adding space between button and component on same horizontal row

I have a button and a CircularProgress component that are next to each other on the same row. I want to add a little bit of space between them. How can I achieve this? I've been trying using style etc but failing.
<Grid
container
direction="row"
// justify="space-between"
spacing={50}
>
<Button
variant="contained"
color="primary"
size="large"
style={{ marginTop: '1em' }}
// style={{ maxWidth: '108px', minWidth: '108px' }}
onClick={() => {
//code
}}
>
Import Games
</Button>
{showCircularProgress === true ? (
<CircularProgress style={{ marginTop: '1em' }} />
) : (
''
)}
</Grid>;
For that you would need to use marginRight to the direction of you next element
<Grid container direction="row">
<Button
variant="contained"
color="primary"
size="large"
style={{ marginRight: "32px" }}
>
Import Games
</Button>
<CircularProgress style={{ marginTop: "1em" }} />
</Grid>;
You could read more about CSS margin here
Simplified Working Example:

Material UI: Apply the fullwidth feature to the Textfield

I have a staff monitoring project that contains many components and among these components is "creating a workspace" and how clear in the picture I made a component and put many elements in it, but the problem is that the "TextField" I want it to be until the end of the page And although I put "Full Width", it is only complete in the middle.
How can I solve the problem?
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
flexGrow: 1
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
resize:{
fontSize:24
}
}),
);
const Settings: FC = () => {
const classes = useStyles();
return (
<div className={classes.root}>
{/*<Container maxWidth="lg" style={{backgroundColor: 'red'}}>*/}
<Grid container direction="row">
<Grid item>
<Avatar style={{width: '5rem', height: '5rem'}} alt="Remy Sharp"
src="/static/images/avatar/1.jpg"/>
</Grid>
<Grid item >
<TextField
fullWidth
name="workspaceName"
placeholder="Workspace Name"
variant="standard"
style={{
paddingLeft: '1.4rem',
transition: ' all .2s cubic-bezier(.785,.135,.15,.86) 0s',
display: 'flex',
alignItems: 'center',
flexGrow: 1,
position: 'relative',
color: '#828588',
}}
InputProps={{
classes: {
input: classes.resize,
},
}}
defaultValue="nameeeee"
/>
</Grid>
</Grid>
<Grid container spacing={5} direction="row" mt={14}>
<Grid item xs>
<Button style={{
minWidth: '10rem',
fontSize: '1.5rem',
height: '44px',
fontWeight: 400,
textShadow: 'none',
color: '#fd71af',
border: 0,
background: 'none'
}}>Delete Workspace</Button>
</Grid>
<Grid item >
<Button
color="primary"
component={RouterLink}
to="/dashboard/workspaces/1"
variant="contained"
style={{
minWidth: '13rem',
minHeight: '4.3rem',
fontSize: '1.4rem',
backgroundColor: '#7b68ee',
borderRadius: 6,
marginLeft:'60rem'
}}
>
Saved
</Button>
</Grid>
</Grid>
{/*</Container>*/}
</div>
);
}
export default Settings;
The fullWidth attribute sets the width to 100% of its parent. Its parent (The <Grid> component) isn't occupying the full space. Add css style { flexGrow: 1 } to the <TextField>'s <Grid> parent or set the xs attribute for the <Grid>
Check this part of the docs for reference

In Material UI how can I modify MuiBotton-endIcon's margin left?

New to Material UI I'm building a navigation component while reading through the docs and I ran across Buttons with icons and label. Wanting to build a button I created my component but there is a large gap between the text and icon.
Button:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
When I review button in the browser the rendered element is:
<span class="MuiButton-endIcon">
<svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
</svg>
</span>
followed with the CSS of:
.MuiButton-endIcon {
display: inherit;
margin-left: 8px;
margin-right: -4px;
}
Wanting to modify the CSS of the margin left I attempted to target MuiButton-endIcon:
navBtn: {
color: '#363537',
verticalAlign: 'middle',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
MuiButtonEndIcon: {
marginLeft: '2px',
},
},
which did not work. The only hack I can get to work is to add a span with inline styling:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
the full component:
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles
import useStyles from '../styles'
const NavIcon = ({ selected }) => {
const { navBtn } = useStyles()
return (
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
Research:
Align material icon vertically
How to Align tab-label and tab-icon horizontally in material-UI using Tabs API
Centered icon and text (React Material-UI)
Material UI - Align icon to center with the Typography text
In Material UI is there a way to modify the margin from the <MenuIcon /> to the text with a <Button /> without implementing an inline style hack on the text?
Edit
Per the answer that mentioned spacing I tried the following:
on <Button>:
<Button
m={1}
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon />}
>
Menu
</Button>
on <MenuIcon>:
<Button
onClick={selected}
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
className={navBtn}
endIcon={<MenuIcon m={1} />}
>
Menu
</Button>
styling:
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
and there is no effect on the margin to the component. My understanding from the docs for spacing to work I would need to build a theme.
for every component of the material-ui, they take a classes prop, by which you can target the inside classes directly. For endIcon, button receives a style object to endIcon key in classes prop.
App.js
import React from 'react'
// Material UI
import { Button } from '#material-ui/core'
import MenuIcon from '#material-ui/icons/Menu'
// Styles from style.js
import styles from './styles'
const NavIcon = ({ selected }) => {
const classes = styles()
return (
<Button
{...{
size: 'small',
'aria-label': 'menu',
'aria-haspopup': 'true',
}}
classes={{endIcon:classes.endIcon}}
endIcon={<MenuIcon />}
className={classes.navBtn}
>
<span style={{ marginRight: '-6px' }}>Menu</span>
</Button>
)
}
export default NavIcon
styles.js
import { makeStyles, createStyles } from '#material-ui/core/styles';
const useStyles = makeStyles(() =>
createStyles({
endIcon:{
marginLeft:'4px'
},
navBtn: {
color: '#363537',
'&:hover': {
backgroundColor: '#FFFFFF',
boxShadow: 'none',
},
'&:focus': {
boxShadow: 'none',
},
},
}),
);
export default useStyles
Add the required margin in endIcon class.
Documentation
From the Spacing docs
In order for it to work you have to wrap the element you want in a so called "Box"
import Box from '#material-ui/core/Box';
You can specify a prop called "m" to the Button, for example:
<Box m="5px"> <Button /> </Box>
This adds 5 pixels to the overall margin of the button, but if you want to apply only margin to the left you can do:
<Box ml="5px"> <Button /> </Box>

Disable react native classes on pressing a different class in the same group

I am completely new to react, Using TouchableHighlight, I have created a class,
import React, { Component } from "react";
import { Text, View, Image, TouchableHighlight } from "react-native";
export default class ChooseProComp extends Component {
render() {
return (
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
>
<View
style={{
marginRight: this.props.mr,
borderRadius: 3,
backgroundColor: "#ffffff",
borderWidth: 0.7,
borderColor: "#e1e1e1",
}}
>
<View style={{ flexDirection: "row", padding: 8 }}>
<Image
style={{
width: 26,
height: 26
}}
source={this.props.typeImage}
/>
<Text
style={{
fontSize: 13,
alignSelf: "center",
marginLeft: 8,
color: "#737f8d"
}}
>
{this.props.type}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
}
I have imported ChooseProComp class in a different component like this, I am not sure whether I have to add a custom method.
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/medical/medical.png")}
type="Medical"
onPress={() => this.renderType("Medical")
}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/dental/dental.png")}
type="Dental"
onPress={() => this.renderType("Dental")}
/>
</View>
<View style={{ flexDirection: "row", marginBottom: 6 }}>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/homiopathi/homia.png")}
type="Homeopathy"
onPress={() => this.renderType("Homeopathy")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/ayurveda/ayurveda.png")}
type="Ayurveda"
onPress={() => this.renderType("Ayurveda")}
/>
</View>
<View
style={{ flexDirection: "row", marginBottom: 6, marginBottom: 25 }}
>
<ChooseProComp
mr={7}
typeImage={require("../../../Images/homescreen/typeicons/yoga/yoga.png")}
type="Yogic science"
onPress={() => this.renderType("Yogic science")}
/>
<ChooseProComp
typeImage={require("../../../Images/homescreen/typeicons/unani/unani.png")}
type="Unani"
onPress={() => this.renderType("Unani")}
/>
</View>
So when I select a particular type, like Medical, I want to disable the ChooseProComp classes of other types. Please help me with this. Other types opacity needs to be decreased as well.
Since it seems you just want one item (<ChooseProComp>) to be selected, I suggest you to simply handle the selected one in your main component state, which at the beginning will be undefined:
state = {
selected: undefined
};
Then define onPress function of each <ChooseProComp> like:
onPress={() => {
this.renderType("Medical"); // I don't know how this works so I won't modify it
if(!this.state.selected){ // if the state is undefined, then set it!
this.setState({
selected: "Medical"
})
}
}
Then, again for each <ChooseProComp> pass a prop disabled like:
<ChooseProComp
...
disabled={this.state.selected && this.state.selected !== 'Medical'}
/>
So, in <ChooseProComp> component (class) you can use it in <TouchableHighlight>:
<TouchableHighlight
underlayColor="transparent"
onPress={this.props.onPress}
style={{ flex: 1 }}
disabled={this.props.disabled}
>
Let me know if this fits your question, or I've misunderstood, or it's not clear enough!