Develop Reference

How to remove an option from MUI Datagrid Column Show/Hide panel

I'm trying to control which columns will show up on the <GridToolbarColumnsButton/> component inside of the MUI Datagrid toolbar (see below image)
Preferred solution:
Use the API thought I haven't found any existing functionality to do this or even any docs for the <GridToolbarColumnsButton/> for that matter
My workaround so far:
Use vanilla js to target the row inside of the panel containing the text 'Commodity', add a class to it, and then pass display:'hide' for that class in the DataGrid componentsProps.
Problem with it is that since the columns panel isn't mounted at the initial render, it doesn't hide the Commodity option until after I open the panel and then force a re-render.
useEffect( () => {
var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === 'Commodity') {
divs[i].classList.add("column-panel-cust");
}
}
})
<DataGridPro
...
componentsProps={{
panel: {
sx: {
paddingTop: '15px',
'& .column-panel-cust': {
display: 'none',
},
},
},
/>

Could not find an API hook for this but was able to get it working by adding an onBlur to <GridToolbarColumnsButton onBlur={handleOnBlur}/> that would run the function:
const handleOnBlur = () => {
var divs = document.querySelectorAll('div .MuiDataGrid-columnsPanelRow')
for (let i = 0; i < divs.length; i++) {
if (divs[i].textContent === 'Commodity') {
divs[i].classList.add("column-panel-cust");
}
}
}
which added the column-panel-cust class to the div with the text commodity, this class's styling was passed in the DataGrid componentsProps:
<DataGridPro
...
componentsProps={{
panel: {
sx: {
paddingTop: '15px',
'& .column-panel-cust': {
display: 'none',
},
},
},
/>

You could also go with just some pure css. You just need to target the position of the column. For instance, I am doing the same thing here hiding the Menu from the GridToolbarColumnsButton (last item).
<DataGrid
columns={columnsDataGrid}
loading={loadingDataSubcriptions}
rows={supplierList}
components={{
Toolbar: customToolbarSupplier,
}}
componentsProps={{
panel: {
sx: {
'& .MuiDataGrid-columnsPanelRow:last-child': {
display: 'none',
},
},
},
}}
/>

How to change Fluent UI icon color on mouse hover?

i am using Fluent UI in my project.
I initializing my button with this simple code in javascript:
iconProps: {
iconName: 'NewFolder',
styles: {
root: {
color: 'orange'
},
}
},
and i can override default color to asked one.
My question is, how to set mouse hover color over button?
https://learn.microsoft.com/en-us/javascript/api/react/iiconprops?view=office-ui-fabric-react-latest##fluentui-react-iiconprops-styles-member

For IconButton, DefaultButton and PrimaryButton you have property root for default button style, rootHovered, rootChecked etc. for different states.
<IconButton
iconProps={{ iconName: 'NewFolder' }}
styles={{
root: { color: 'blue' },
rootHovered: { color: 'orange' },
}}
/>
Codepen working example
Button styles also might help.

Color each selected Dropdown item in react semantic-ui

I have the following jsx code (react-semantic-ui) in render method:
{!this.props.loading &&
<ControlRow>
<Grid.Column width={5}>
<Dropdown
multiple
fluid
selection
options={myOptions}
onChange={this.navigateToMyFunc}
/>
...
...
And I am using styled-components to style my elements:
https://github.com/styled-components/styled-components
Unfortunately the only working styling for the Dropdown due to some weird specifics of the environment is indirect from ControlRow:
const ControlsRow = styled(Grid.Row)`
.ui.multiple.dropdown > .label {
color: white !important;
background-color: #2185d0;
}
`
See also the following thread: Dropdown in semantic ui can't be made of multiple selection type when wrapped with styled-components
Now the Dropdown as you can see is of type multiple. Each selected item should be colored according to the specified in the myOptions options. I can pass myOptions to the ControlRow which will make the array to be accessible in it, but I am not sure how to write the styled-components part of it:
.ui.multiple.dropdown > .label {
color: white !important;
background-color: ${props => props.myOptions..??};
}
I need to also know which item it is to select correct myOptions color. Here is how it looks:
Right now it is just always blue, but I need it to be colored according to each option.
Update
Seems like it is an absent feature in semantic-ui-react - coloring by hex - codes (only a few regular color names allowed) - so I posted this feature to their github:
https://github.com/Semantic-Org/Semantic-UI-React/issues/3889

by default semantic-ui supports selected list of colors. If you need custom label color, you can add your custom css classes and apply the class name to the label.
const getOptions = (myOptions : string[]) => {
return myOptions.map((myValue : string) =>({
key: myValue,
text: myValue,
value: myValue,
label: { className: setColorClass(myValue), empty: true, circular: true }
}))
}
function setColorClass(optValue) {
if (optValue === '1') return 'light-green';
else if (optValue === '2') return 'sandy-brown';
else return 'light-coral';
}
in your css class you can have the following classes
.ui.label.light-green {
background-color: lightgreen !important;
}
.ui.label.sandy-brown {
background-color: lightgreen !important;
}
.ui.label.light-coral {
background-color: lightgreen !important;
}
Also if you want to apply label circular color when the value is selected, you can do the following, write a renderLabel function in your react class and apply it in the compnent
function renderLabel(label:any){
return {
content: `${label.text}`,
className: setColorClass(label.text)
}
}
Sample component
<Dropdown
search
selection
closeOnChange
value={myValue}
options={getOptions(myOptions)}
placeholder='Choose from here'
onChange={handleDropdownChange}
renderLabel={renderLabel}
/>

You don't need to use CSS styling for this. And nothing related to Styled Components needs to be done.
SemanticUI lets you use a custom render function for labels.
You would use it like this:
const renderLabel = (option) => ({
color: option.color,
content: option.text,
})
const myOptions = [
{ text: "option one", color: "blue" },
{ text: "option two", color: "red" },
// more options...
]
// ...
<Dropdown
multiple
fluid
selection
options={myOptions}
onChange={this.navigateToMyFunc}
renderLabel={renderLabel} // here
/>
This assumes that your option objects have a color property and a text property. You'll need to adjust to the shape of your option objects.
Also, the color property will need to be one of the available label colors in SemanticUI:
const colors = [
'red',
'orange',
'yellow',
'olive',
'green',
'teal',
'blue',
'violet',
'purple',
'pink',
'brown',
'grey',
'black',
]

How to custom color text and icon in TableSortText component of Material-ui?

What I'm trying to do:
I am trying to provide the user the option to provide custom styling to my EnhancedTable component by passing in a styles object containing properties such as headCellColor, headCellBackgroundColor, bodyCellColor, bodyCellBackgroundColor etc which can be used to color the cells in TableHead and TableBody.
In the TableHead component, I use a TableSortLabel in a way similar to what they've done in this material-ui docs example: https://material-ui.com/components/tables/#sorting-amp-selecting
I wish to custom color the text and the arrow icons on hover and when active based on the props provided by the user.
Let's see the colors of TableSortLabel in different situations:
The color of the text is grey initially and there is no arrow. When mouse is hovered over it, a grey arrow appears and the text turns black. On clicking it, active state is set, the grey arrow turns black and the text turns black permanently until active state is removed.
What I've tried so far:
const useStyles = makeStyles({
tableSortLabel: props => ({
backgroundColor: "blue",
color: props.headCellColor,
fill: props.headCellColor,
"&:hover": {
backgroundColor: "blue"
}
})
});
function EnhancedTableHeadCell(props) {
const { isActive, onHoverSortState, clickHandler, ...otherProps } = props;
const classes = useStyles(props.styles);
return (
<FancyTableCell styles={props.styles} {...otherProps}>
<TableSortLabel
active={isActive}
classes={{
icon: classes.tableSortLabel,
active: classes.tableSortLabel
}}
direction={onHoverSortState}
onClick={clickHandler}
>
{props.children}
</TableSortLabel>
</FancyTableCell>
);
}
This is what it looks like in the browser:
https://i.postimg.cc/fW7W2MRB/c1.jpg
The first one is a normal header, the second is on hover and the third is when clicked (active state).
From what we can observe, the text color is totally unaffected by the color css property in all the three cases (normal, hover, active). On hover, backgroundColor only affects the icon and not the text. However, we can see that backgroundColor affects the text when it is active. Everything is going as expected with the icon. The only issue is with the text.
What could I be possible doing wrong? How can I solve my problem?

What worked for me is:
const StyledTableSortLabel = withStyles((theme: Theme) =>
createStyles({
root: {
color: 'white',
"&:hover": {
color: 'white',
},
'&$active': {
color: 'white',
},
},
active: {},
icon: {
color: 'inherit !important'
},
})
)(TableSortLabel);
You can reference the following for increasing css specificity:
https://material-ui.com/customization/components/#pseudo-classes

Solution for your problem is following:
MuiTableSortLabel: {
root: {
color: textPrimary,
// if you want to have icons visible permanently
// '& $icon': {
// opacity: 1,
// color: primaryMain
// },
"&:hover": {
color: primaryMain,
'&& $icon': {
opacity: 1,
color: primaryMain
},
},
"&$active": {
color: primaryMain,
// && instead of & is a workaround for https://github.com/cssinjs/jss/issues/1045
'&& $icon': {
opacity: 1,
color: primaryMain
},
},
},
}
This restyling I use globally via my ThemeProvider, but you can of course use it individually in your single component by using "withStyles" HOC (see "BootstrapButton" in example)

I could'nt find a proper way to do it so I came up with a temporary solution overriding the material ui css.
I added this to my global css:
.MuiTableSortLabel-root.MuiTableSortLabel-active,
.MuiTableSortLabel-root:hover,
.MuiTableSortLabel-icon {
color: inherit !important;
}

Worked for me with Mui5:
sx = {
{
'&.MuiTableSortLabel-root': {
color: 'white',
},
'&.MuiTableSortLabel-root:hover': {
color: 'blue',
},
'&.Mui-active': {
color: 'blue',
},
'& .MuiTableSortLabel-icon': {
color: 'blue !important',
},
}
}
'&.MuiTableSortLabel-root' <-- no space &.
'&.Mui-active' <-- no space &.
'& .MuiTableSortLabel-icon' <-- space

How to create button with text under icon by reactjs?

Now, I have component like this:
code of it:
import React from "react";
import {withStyles} from "material-ui/styles";
import Settings from "material-ui-icons/Settings";
import Button from "material-ui/Button";
const styles = {
button: {
color: "primary",
height: 95,
width: 95,
disableRipple: "true",
focusRipple: "true",
},
icon: {
height: 35,
width: 35,
display: "block",
float: "none",
},
text: {
height: 35,
width: 35,
display: "block",
float: "none",
marginTop: 10,
},
};
/* eslint-disable react/prop-types */
const IconedLabel = ({classes}) => (
<section>
<Button className={classes.iconButton} variant="raised" color="primary">
<Settings className={classes.icon}/>
<div className={classes.text}>Message</div>
</Button>
</section>
);
export default withStyles(styles)(IconedLabel);
But need to button, that in top part contains icon and text message in bottom.
I use reactjs and material-ui lib from here https://material-ui-next.com/demos/buttons/

The Button component uses flexbox to control the layout/alignment of content. To align the content vertically (so the icon is above the text), you can simply change the flex-direction to column.
This style needs to be applied to an element inside the button component, not to the root element. You can use the classes property to override all of the styles in a component.
In this case, you want to add flexDirection: column to the label class.
Documentation on class overrides in material ui v1
Here's a working example. Hope it helps.
const [React, ReactDOM, Button, Settings, withStyles] = [window.React, window.ReactDOM, window['material-ui'].Button, ({className}) => <i className={`material-icons ${className}`}>settings</i>, window['material-ui'].withStyles]
// Ignore code above this line
const styles = theme => ({
button: {
height: 95, // setting height/width is optional
},
label: {
// Aligns the content of the button vertically.
flexDirection: 'column'
},
icon: {
fontSize: '32px !important',
marginBottom: theme.spacing.unit
}
})
const CustomButton = ({ classes }) => (
<Button
/* Use classes property to inject custom styles */
classes={{ root: classes.button, label: classes.label }}
variant="raised"
color="primary"
disableRipple={true}
>
<Settings className={classes.icon} />
Message
</Button>
)
const WrappedCustomButton = withStyles(styles)(CustomButton)
ReactDOM.render(<WrappedCustomButton />, document.querySelector('#root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://unpkg.com/material-ui#1.0.0-beta.40/umd/material-ui.production.min.js"></script><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><div id="root" />

A (potentially bad) solution would simply be:
.MuiIconButton-label {
flex-direction: column
}
I say bad, because you might want to use it in it's standard format elsewhere.
What I opted to do was add a class name nav-bar-icon-wrapper to the IconButton & set the flex direction in it's parent:
.nav-bar-icon-wrapper {
flex-direction: column
}
.MuiIconButton-label {
flex-direction: inherit
}
If I run into instance later where I want the icon/label button to be standard, I'll just add a new class default-icon-wrapper and css that handles that:
.default-icon-wrapper {
flex-direction: row
}
FWIW:
I preach the BEM http://getbem.com/introduction/ convention AND that whenever you make a component, you add an optional modifier prop.
I have functions in a shared dir that looks these:
export function BEMifyThis(modifier) {
return (klass) => BEMify(klass, modifier)
}
export function BEMify(klass, modifier=false) {
if (modifier) {
klass += ` ${klass}-${modifier}`
}
return klass
}
Then I use that everywhere in my component so the user can access the component elements as a group or individually using their modifiers.
import {BEMifyThis} from '../shared/bem'
const BEMify = BEMifyThis(this.props.modifier)
className={"navbar__menu_item")}
becomes
className={BEMify("navbar__menu_item")}
so something like navbar__menu_item becomes navbar__menu_item navbar__menu_item-logout