All Questions
Tagged with react-admin material-ui
104 questions
1
vote
0
answers
218
views
React-Admin List empty data placeholder not showed with "filterDefaultValues"
I have a List component with a custom component for "empty". Without filterDefaultValues, it shows it.
<List
filters={DataFilters}
filterDefaultValues={{ statuses: ['All'] }}
...
- 351
1
vote
0
answers
76
views
React-Admin styling issue with SingleFieldList and ChipField
I am working on React project based on React Admin 4.12.1.
It worked fine before I update the packages by running yarn upgrade.
The issue is that, I cannot see the text inside ChipField anymore.
<...
- 11
0
votes
1
answer
188
views
DateRangePicker in a React-Admin application
I want to use material ui's DateRangePicker in my React-Admin app.
But when i do an npm install @material-ui/pickers, I get:
While resolving: [email protected]
Found: [email protected]
node_modules/react
...
- 4,376
3
votes
0
answers
238
views
React-admin 4.1.0 - AutocompleteArrayInput and default value make search function not working
I'm using react-admin library version 4.1.0 AutocompleteArrayInput with defaultValue prop, its search function is not work. When typing any value to search, AutocompleteArrayInput will clear all.
The ...
- 203
0
votes
2
answers
468
views
Conditional styling using `sx` in React-Admin
Since makeStyles is deprecated: https://mui.com/system/styles/basics/. I'm trying to implement new approach with sx prop.
I'm having trouble understanding how to use it with React-Admin components.
...
- 2,928
1
vote
0
answers
196
views
Disable link for menuItem in React Admin
I have a react admin menu with a submenu, and I want the submenu to expand/collapse on click when you click the title OR the chevron. Right now, if you click the primary text, it triggers the navlink ...
- 109
0
votes
1
answer
158
views
SelectInput in react-admin only shows last 20 items of list from resource
I have this code in a creation dialog
<ReferenceInput source="id_activofijo" reference="activos/activosfijos" >
<SelectInput label="Activo" optionText="...
1
vote
1
answer
238
views
Set MUI icon color correctly
I have a functional component which should set some default values for react-admin's BooleanField like this:
import ClearIcon from '@mui/icons-material/Clear'
import DoneIcon from '@mui/icons-...
- 885
0
votes
0
answers
67
views
Apply only one confirmation dialog for all file and image inputs
I have few ImageInput and FileInputs and a confirmation dialog. Is there a way for all ImageInput and FileInputs to use on one confirmation dialog only? Rather have to create many confirmation dialogs ...
- 23
0
votes
1
answer
162
views
BooleanField in V4 does not accept Mui Icons anymore
In react-admin v3 I used the following functional component:
import ClearIcon from '@mui/icons-material/Clear'
import DoneIcon from '@mui/icons-material/Done'
import get from 'lodash/get'
import { ...
- 885
0
votes
1
answer
380
views
Storing array input using react admin without ArrayInput
I was wondering if it was possible to input array data without using ArrayInput.
My data structure is the following:
{ id,
data: {
oilPrice: {day, price}[],
gasPrice: {day, price}[]...
0
votes
1
answer
778
views
React-Admin custom data grid expand row event (v3.19)
I'm trying to use react-admin 3.19 following the custom datagrid example.
https://marmelab.com/react-admin/doc/3.19/List.html#expand
I can't manage to get the expand to work. In the example below i ...
- 836
0
votes
2
answers
726
views
React-Admin retrieve item on AutocompleteInput onSelect
I've got the following code in React-Admin v3
<AutocompleteInput
onSelect={(value) => {
setCurrentCategory({ reference: value.id });
}}
After ...
- 3,172
0
votes
1
answer
1k
views
How to open a URL in a new tab in React Admin? [duplicate]
I have the following 'Button' component:
<Button
variant="contained"
label="START"
color="secondary"
size="large"
onClick={handleClick}
/>
...
- 614
2
votes
1
answer
4k
views
How to update dependencies of dependencies using Yarn
I use react-admin v3.1.4 and I tried to upgrade to v4 but it was to hard. So, while trying to go back to the previous version, I found a problem that didn't run. This is a problem caused by the ...
- 59
1
vote
0
answers
320
views
How to parse and format data with ReferenceArrayInput and AutocompleteArrayInput
I work around react-admin 4.13. I have a problem transforming some data with parse and format when I use it to parse it also changes properties in fetch request and the error occurred.
<...
- 11
0
votes
1
answer
1k
views
Set maximum form field length in React Admin
Is there some way to set a field in a SimpleForm within React-Admin to limit the number of characters a user can type into that field?
Based on the docs, the React-Admin framework itself does not ...
- 4,376
0
votes
0
answers
247
views
Can not show image in react-admin
I can not understand why react admin refuses to show pictures
This is the code of the component
const RecipeShow = (props) => {
const controllerProps = useShowController(props);
return (
<...
- 119
1
vote
1
answer
698
views
How to override the TextInput from React-Admin
I only want to override the specific fields. Setting the custom theme will override the other fields too.
Tried using useStyles but didn't work and tried using direct style props but that also didn't ...
- 155
0
votes
2
answers
1k
views
Deactivate Pointer-Events of material-ui Edit Icon
I'm trying to deactivate the pointer-events on an material-ui Edit-Icon.
(My goal is that 'the hand' dissappears when hovering over the icon.)
import EditIcon from '@material-ui/icons/Create';
import {...
- 494
2
votes
3
answers
3k
views
react-admin add font with override MuiCssBaseline @global @font-face not working
I am trying to add the NotoSansSC-Regular.otf from Google to react-admin so that the default font for simplified Chinese will be that. I have successfully got it working if I do a CSS include of the ...
- 950
0
votes
1
answer
5k
views
Material UI TextField with type datetime-local date picker with seconds
I am using react-admin and want to edit date and time including seconds using DateTimeInput. However, I am not able to do that. I tried following:
Option 1:
<TextField
id={id}
{...input}
step=...
- 11
0
votes
1
answer
549
views
Set icon in React Admin ChipField conditionally
I have a ChipField in my Datagrid in my React Admin App which shows a text property. Now, I'd like to add an icon to that ChipField by using the icon prop. Since the ChipField can have one of five ...
- 1,409
0
votes
1
answer
347
views
How to edit React-admin MuiTableCell or other Mui components?
I'm building an Admin with React-Admin, and its documentation quite lacks clearance on how to edit the tables grid or other components. I need to edit the padding of the MuiTableCell. Currently, it ...
- 601
0
votes
3
answers
2k
views
How to use react-admin with material ui version 5
How to use react-admin with Material UI version 5. Is it possible to make it independent from material ui 4?
- 3,175
0
votes
1
answer
226
views
Is there any quick way to implement a Material-UI theme?
I am aware of custom theming process within react-admin.
I was wondering if in react-admin it is possible to implement a custom theme without needing to go component by component and theming them ...
- 31
1
vote
1
answer
1k
views
How can I remove the navbar from React-Admin?
I'm having some issues trying to delete/remove the default navbar from react-admin.
As you can see, my original Navbar is at the bottom of the react-admin navbar
which if I inspect and remove it, it ...
- 601
0
votes
1
answer
35
views
how to handle the method type in ListItem of type button in react-admin?
In raect-admin I have thomething like this:
<ListItem
button
to={`/XXX/${record.id}`}
component={Link}
key={record.id}
>
when clicking on the link I want to ...
- 1,217
0
votes
1
answer
1k
views
React-Admin CSS theme overrides are placed earlier in <head> and getting overwritten by MaterialUI
After upgrading to React-Admin 3.15 (and @material-ui/core 4.11.4 (styles as well)) we're running into some issues with styles. For example - for our sidebar <MenuItemLink /> elements we've ...
0
votes
1
answer
395
views
Custom Components in a Custom Layout in react-admin e.g. appbar, sidebar doesnt' don't show the correct theme colours for all page types
What you were expecting:
When you are dynamically pick a theme object in a custom layout based on the URL/history in react-admin resource, the correct theme is used on the every page type e.g. List, ...
- 165
0
votes
1
answer
585
views
How do you change the primary colour on a resource basis in react-admin?
I have various resource components that sit inside the react-admin Admin component. The admin component has a custom layout. Each of the resource screens has a different primary colour though, to ...
- 165
5
votes
3
answers
2k
views
React-admin Datagrid: expand all rows by default
I have a react-admin (3.14.1) List using a Datagrid, where each row is expandable.
Does anyone know how to expand all the rows by default?
Or expand a row programmatically?
I've checked the Datagrid ...
- 1,808
2
votes
0
answers
386
views
react-admin: <Show> component elements not rendering when wrapped inside divs
I'm currently working on an admin portal using react-admin, and I've been able to seamlessly style it using MaterialUI, specifically its makeStyles hook. The way I've done it is I'd import my ...
- 41
0
votes
1
answer
268
views
How to prevent entering wrong dates in react-admins DateInput?
How to prevent user from manually entering wrong dates like 30.Feb.2020?
import { DateInput } from "react-admin";
const validateDate = (value) => {
console.debug('value of the ...
- 11.6k
1
vote
0
answers
214
views
How to disable manual editing of react-admin DateInput
I try to simply disable the manual editing of the DateInput of react-admin. I just want to be able to pick a date (green) insteed of allowing the user to enter the dates (Red)
So the control should be ...
- 11.6k
1
vote
1
answer
818
views
Material-UI : How to replace backgroundImage css in react admin <Login />?
I am reading the following documentation :
React-Admin customize login background: https://marmelab.com/react-admin/Theming.html#using-a-custom-login-page
Material-UI customize theme: https://...
- 14.3k
2
votes
0
answers
683
views
Appending MenuItems to Material-UI Select Input in React
So I'm not great with react or even javascript, but what I'm trying to do is take this react element:
const selectItem = (
<Select defaultValue="" id="type-select" ...
- 775
0
votes
1
answer
2k
views
How can i override the overflow property in material UI MuiCard-root class
This is my styles:
const styles = (theme) => ({
panel: {
position: 'absolute',
zIndex: 10,
},
setLink: {
display: 'inline',
textDecoration: 'underline',
cursor: 'pointer',
...
- 5
1
vote
0
answers
386
views
material ui auto complete ID with event.target.id using onChange
I am trying to get the id of tag whenever onChange is fired. However the id I get from onChange function is different from the id i have used in the tag.
Here is the code:
<Autocomplete
id="...
- 21
1
vote
1
answer
603
views
React-Admin - adding material ui theme overrides specific css selector as a global
In React-Admin, I'm trying to apply certain css code inside my Material UI theme as a global attribute. Right when I'm creating my theme, I've been added those lines inside my overrides:
overrides: {
...
- 117
0
votes
2
answers
1k
views
Custom react-admin drag & drop list
It can't drag. What is wrong with it?
I'm using react-sortable-hoc with material-ui to custom react-admin list page with drag & drop sortable.
Demo : https://codesandbox.io/s/vibrant-visvesvaraya-...
2
votes
1
answer
1k
views
React admin custom input component with text input base style
I created a DateTimePicker component for my react-admin project:
import { DateTimePicker, DateTimePickerProps, MuiPickersUtilsProvider } from "@material-ui/pickers";
import { FC } from "...
- 3,833
1
vote
0
answers
284
views
React-admin unhandled rejection in fetching data when it should not be
I'm writing custom data provider. If I throw an error from data source method, e.g. delete('resource', options) I see error properly logged (react-admin uses showNotification for that internally) and ...
- 455
1
vote
1
answer
679
views
How can I use show component inside a ListItemText?
I used the ListItemText to display the list and my goal is to use the show component in the react-admin when each row of the list is clicked, but the function related to the display is not executed? ...
- 139
0
votes
2
answers
559
views
How i can set user Image & avatar in the list, if user upload image then show user image otherwise its show the avatar
const ImageDetail = ({ record = {} }) => {
return (
<div>
<Avatar style={{ backgroundColor: colour() }}>
{record.MemberFirstName && ...
- 45
0
votes
1
answer
510
views
RaFormInput width always seems to be 256px
I have the below tabbed form and no matter what I set as far as content (grids, boxes, etc) the width of the parent form is always 256px
The html element is MuiContainer-root RaFormInput-input-61 but ...
- 75
0
votes
3
answers
4k
views
Change the link colors in Material UI Sidebar (Drawer) in a Reactjs app
I tried using different properties in the sidebar style to override the link color but nothing is working.
Default style/color of Sidebar drawer (before overriding the style)
MySidebar.js
// ...
- 37
0
votes
1
answer
465
views
react-admin without Material UI
how can i use react-admin without material UI?
I want to use react-admin without material
example: replace it with a boostrap or another design library
- 63
1
vote
1
answer
2k
views
Is there a possibility to override the react admin pagination for the List Component to add an input to let the possibility to choose our page?
I would like to know if actually react admin does let us override the actual Pagination in the List Component to add an input at the place of the "..." and enter a page number directly ...
- 11
0
votes
0
answers
162
views
How to show up DeleteButton in react-admin? And not only the last stuff loading from database?
I started using javascript and React for a small project based on REST. So I tried to show some datas from my database in a browser, but only the last Product shows up 7 times (only 7 products are in ...
- 13