We've recently gone through an upgrade of ag-grid-react to version 23.0.0 and have enabled charting, but I've noticed that we don't have the chart toolbar rendered under the hamburger menu as it would be in the demos. I've imported/configured the grid as follows:
import 'ag-grid-enterprise/dist/styles/ag-grid.css';
import 'ag-grid-enterprise/dist/styles/ag-theme-balham-dark.css';
import 'ag-grid-enterprise';
import { AgGridReact } from 'ag-grid-react';
// ... component definition things as referenced in props below
<AgGridReact
defaultColDef={columnDefs.defaultColDef}
columnTypes={columnDefs.columnTypes}
columnDefs={cols}
rowData={rows.length ? rows : null}
enableRangeSelection
groupMultiAutoColumn
groupDefaultExpanded={2}
groupHideOpenParents
suppressAggFuncInHeader
resizable
sortable
animateRows
pivotMode={prefs.pivotMode}
suppressLoadingOverlay
statusBar={this.state.statusBar}
onGridReady={this.onGridReady}
autoGroupColumnDef={{ cellRendererParams: { suppressCount: true } }}
getContextMenuItems={this.getContextMenuItems}
enableCharts
/>
Screenshot of result: The toolbar renders, but we don't have the menu to change data/settings along the right hand side that are found in the Documentation and demos. I'm not sure if I'm missing something in the configuration of the grid, or if I'm missing some chart-specific imports. Any help would be appreciated!
Found the solution on my own, in our package.json there was a conflicting style included from an older ag-grid that was conflicting with the styles
Related
I'm trying to use the ImageList component. I imported it as follows:
import { ImageList} from "#material-ui/core";
This works just fine. When I add the "variant" prop to the component, however, I start getting errors saying that I'm not matching any of the overloads. I see the variant prop used in their demos and on the API reference.
Error message
I suspect this has something to do with versioning -- I read something about ImageList being MUI v5 alpha. If that's the case I don't know what to do to fix my issue. The linker is finding the module just fine, so I don't know what's wrong.
I think I answered this myself. I was importing from the v4 version of MUI (#material-ui/core). I had to install v5 and import from here, instead:
import ImageList from '#mui/material/ImageList';
And then the variant prop worked. I was disheartened to find out that breakpoint props don't exist with this component, like they do with Grid. Instead, I had to use MUI's useMediaQuery hook to get the screen size and set the col prop accordingly.
nextjs + material UI
Im sure its something basic that Im overlooking, but Im trying to override mui styles with css modules. The accepted method seems to be wrapping the component tree in a StylesProvider component and passing it a injectFirst attribute. When I do this though it generates the error
*Error: Element type is invalid: expected a string (for built-in components) or*
This is using nextjs. Package.json looks like:
#emotion/cache 11.4.0
#emotion/react 11.4.0
#emotion/server 11.4.0
#emotion/styled 11.3.0
#material-ui/core 5.0.0-beta.0
clsx 1.1.1
next 11.0.1
prop-types 15.7.2
react 17.0.2
react-dom 17.0.2
There is a codesandbox where you can see the error live and examine the code. Any ideas gratefully accepted.
Material UI began using emotion as styling library in v5, so as per the migration guide, the correct component to use is StyledEngineProvider. Like so:
import * as React from 'react';
import { StyledEngineProvider } from '#material-ui/core/styles';
export default function GlobalCssPriority() {
return (
<StyledEngineProvider injectFirst>
{/* Your component tree. Now you can override Material-UI's styles. */}
</StyledEngineProvider>
);
}
I am trying to style the calendar icon (to be specific increase the font-size of the icon) inside material UI's keyboard datepicker text field in React.
<KeyboardDatePicker
keyboard={!this.props.isDisabled}
keyboardIconProps={{ fontSize: "35px" }}
clearable
disabled={this.props.isDisabled}
error={this.state.isError}
helperText={this.state.errorMsg}
pickerRef={node => (this.picker = node)}
InputProps={{ disableUnderline: true, disabled: this.props.isDisabled }}
onError={console.log}
value={this.props.storeValue}
onChange={this.onChangeCallback}
format={this.props.displayFormat}
onBlur={this.onBlurCallback}
disableOpenOnEnter
InputLabelProps={this.inputLabelProps}
disableFuture={this.props.disableFuture}
disablePast={this.props.disablePast}
/>
I tried setting the KeyboardButtonProps but it doesn't seem to set the style of the icon. I searched online and there are no solutions for my problem. Any help would be much appreciated. Cheers!
Assuming that you use KeyBoardDatePicker from #material-ui/pickers
You can change the icon via the keyboardIcon prop which expects a ReactNode as a child.
Basically just add the following prop to your component
keyboardIcon={<SomeReactElement/>}
Here you have a working sandbox
After update from v3 to v4.8.3 do not work customizing components. My goal is to override Select component to get text color 'red'.
const styles = theme => ({ temp: { fontSize: 12, color: "red" })
...
<Select classes={{ root: classes.temp }} ....> ...</Select>
but MuiInputBase-input class always stay on top.
https://i.imgur.com/JGK7J89.png
I see that there are diffrents in styles loading by html head import, my current version(v4) is:
https://i.imgur.com/gAlECET.png
I see that import is doubled, and overrides my custom style.
On v3 all mui styles imports was placed on top of list and not mixed vs custom styles. I cant find more info to get solution and reason of doubling imports. where error may arise?
edit:
i must give some more details...
Problem appered after a big legacy project was updated. For represet my problem, i cut most of code and create demo on codesandbox .
Unfortunately it work fine on codesandbox, and dont let see a problem. if i download zip and start it - i have my problem. Tried on two machine ubuntu 18.04 and MacOS, both have that problem - colour red dont applied to second select. Some more detail are in issue if it will helpfull for someone. Reason in solution below
I have created sandbox for you where you can see the overwritten menu items.
Code sandbox: https://codesandbox.io/s/override-select-component-material-ui-c1io6?fontsize=14&hidenavigation=1&theme=dark
The reason was that nested component has wrong import statement. Wrong import that was work "properly" in v3 for some reason:
import InputBase from "#material-ui/core/InputBase/InputBase";
must be:
import InputBase from "#material-ui/core/InputBase";
becouse it, my styles was overriding by base style
Visual Studio Code with Native Script does not recognise Native Script components sometimes in the component XML. I have one from the official tutorial and in it the ActionBar is recognized - but GridLayout is not:
'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas' of this component.
XML looks like this:
<ActionBar title="Groceries">
<!-- On iOS devices, <ActionItem>s are placed from left to right in sequence; you can override that (as the code above does) by providing an ios.position attribute. -->
<ActionItem text="Share" (tap)="share()" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
<!-- add-bar necessary since we moved the page up 20 over the status bar on iOS-->
<GridLayout row="0" columns="*, auto" class="add-bar">
<TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" (returnPress)="add()" col="0"></TextField>
<Image src="res://add" (tap)="add()" col="1"></Image>
</GridLayout>...
It seems totally arbitrary since for example StackLayout is no problem in another XML in same project.
As suggested in the error log make sure that you have included NO_ERRORS_SCHEMA in the respective NgModule (if using lazily loaded modules include the schema there as well)
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
#NgModule({
schemas: [NO_ERRORS_SCHEMA],
//... more code follows here
Side note: it might be just an incomplete snippet but still... the parent GridLayout does not have an enclosing tag
In my case, it was happening just for one component html though NO_ERRORS_SCHEMA was included in respective module of that file, deleting and creating that file solved the issue for me strange but it did happen.