I what to change color of label and text in TextField component.
I am using material-ui#next.
and docs from 0.15 does not work ( I have checked it) .
Can someone give me short example how to override floating label? ( not changing general theme ! )
thanks
From the documentation, when you have a TextField it is, in fact, an abstraction component of several smaller components
Advanced Configuration
It's important to understand that the text field is a simple
abstraction on top of the following components:
FormControl
- InputLabel
List item
Input
FormHelperText
Blockquote
If you wish to alter the properties applied to the native input, you can do as follow:...
In your TextField you can pass props for the Input and Label as follow:
<TextField
defaultValue="react-bootstrap"
label="Bootstrap"
InputProps={{
disableUnderline: true,
classes: {
root: classes.textFieldRoot,
input: classes.textFieldInput,
},
}}
InputLabelProps={{
shrink: true,
className: classes.textFieldFormLabel,
}}
/>
this is taken from the last example given in this page.
Related
I'm trying to style material-ui DataGrid component to justify the content in the cells. I am reading the material ui docs about styling but I don't seem to doing it correct and frankly find the docs on styling very confusing.
The doc here: https://material-ui.com/customization/components/#overriding-styles-with-classes implies I should be able to do something like this:
const StyledDataGrid = withStyles({
cellCenter: {
justifyContent: "center",
},
})(DataGrid);
<div style={{ height: 300, width: '100%' }}>
<StyledDataGrid rows={rows} columns={columns} />
</div>
However, when I do this, I don't see the style being added to the MuiDataGrid-cellCenter DOM element. Attaching a screenshot which shows the element classes. In the inspector I see that the style isn't being added (and if I add it manually I get the desired results). Am I not using the withStyles function correctly?
So after a bit more messing around, I believe the issue is that the DataGrid component does not support the classes property (which it seems most of the material ui components do). I believe the withStyles usage about is shorthand for passing the classes via the classes prop. Since the prop isn't listed in the API https://material-ui.com/api/data-grid/ I'm assuming this is why it isn't working. I confirmed that I can get the styles working by using a combination of the className parameter with descendant selection.
If someone determines I'm wrong and there is a way to get withStyles working on this component please comment.
const useStyles = makeStyles({
root: {
"& .MuiDataGrid-cellCenter": {
justifyContent: "center"
}
}
});
...
export default function X() {
const classes = useStyles();
return (
...
<DataGrid className={classes.root} checkboxSelection={true} rows={rows} columns={columns} />
...
)
}
ALTERNATIVE SOLUTION: (for others with similar issues)
If you are working within a class and cannot use hooks...
<div>
<DataGrid
rows={rows}
columns={columns}
sx={{
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}}
/>
</div>
This is a great component - just wondering if there's a simple way to apply css styles to the actual input element? e.g. to set the background colour via a prop
You can use inputProps to apply props directly to the input component:
<Typeahead
...
inputProps={{
className: 'my-custom-classname',
style: {
'backgroundColor': 'red',
}
}}
/>
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes
We'd like to use React Data Grid from Adazzle (as mentioned in the tag with this question) now that we're using React (16.xx) and the older jsGrid is less appealing.
Two questions:
Our old jsGrid had a data type to include in the grid called Checkbox. This was immensely helpful. I haven't found a similar type in the React Grid. Have I just missed it or is it not a part of the library?
In each row, in some columns, we'd like to actually have two rows of data inside the column -- i.e., two lines of text separated by carriage return. But the react-data-grid demos only seem to show one line per column. Is this a limitation, or can we use CSS in the values inside columns?
Is there search included for the rows shown in the table at any given point in time?
I will provide answer to your question part by part
1) In react-data-grid column you can include a checkbox by using the formatter
attribute that is specified while the columns are defined.
Consider the following example
let columns = [
{
key: 'name',
name: 'Name',
resizable: true,
width: 100
},
{
key: 'checkbox',
name: 'CheckBox',
formatter:checkBoxFormatter,
resizable: true,
width: 100
}
]
class checkBoxFormatter extends React.Component {
render() {
return (
<div>
<CheckBox></Checkbox> //Provide your checkbox code here
</div>
)
}
}
2)You can exapand the rows for that you need to use getSubRowDetails and onCellExpand attributes of ReactDataGrid component .For example refer this documentation
3)Search is available for filtering .For example refer this documentation
I have a basic ag-grid with some simple dummy data, but it only displays when I don't import the .css files provided with the library, and even then it displays incorrectly.
Excerpted from my package.json:
"ag-grid": "10.0.1",
"ag-grid-react": "10.0.0",
"react": "15.4.2"
From my React component:
constructor:
this.state = { columnDefs: [{headerName: 'Product', field: 'product'},{headerName: 'Country', field: 'country'}], rowData: [{product: 'IOL', country: 'US'}, {product: 'Suture', country: 'IN'}]}
from render():
return (
<div id='grid'>
{/*<div id='grid' className='ag-fresh'>*/}
<div>
Here's the grid...
</div>
<AgGridReact
// listen for events with React callbacks
onGridReady={this.onGridReady.bind(this)}
// onRowSelected={this.onRowSelected.bind(this)}
// onCellClicked={this.onCellClicked.bind(this)}
// binding to properties within React State or Props
showToolPanel={this.state.showToolPanel}
quickFilterText={this.state.quickFilterText}
icons={this.state.icons}
// column definitions and row data are immutable, the grid
// will update when these lists change
columnDefs={this.state.columnDefs}
rowData={this.state.rowData}
// or provide props the old way with no binding
rowSelection="multiple"
enableSorting="true"
enableFilter="true"
rowHeight="22"
/>
</div>)
If I run this code without importing any .css I get a jumbled grid like:
Now if I import the css per the getting started guide:
import 'ag-grid-root/dist/styles/ag-grid.css' // see webpack config for alias of 'ag-grid-root'
import 'ag-grid-root/dist/styles/theme-fresh.css'
... then no part of the grid displays (only my div before the grid). With the css imported, it doesn't matter if I have assigned a theme to the grid or not, nothing shows.
I had a similar problem with the rows of data not showing, just the pagination. Setting a fixed div height worked to make the rows display, but adding domLayout: 'autoHeight' to the gridOptions means its always the right height to display correctly.