CODEWITHSUNDEEP
reactjsreact-admin
Danyil Suhak
Danyil Suhak

Reputation: 61

How to change datagrid rows text color in react-admin?

I want change a text color for row, but can't find decision. I tried this code. "color" not working, but "backgroundColor" working.

export const CustomersList = props => {
    const DatagridUsersProps = {
        rowStyle: (record, index) => {
            return {
                color: "#FFCC00",
                backgroundColor: (record.is_blocked || record['is_deleted']) && "silver",
            };
        }
    };
    return (
        <List
            {...props}
        >
            <ScrollingWrapper>
                <Datagrid {...DatagridUsersProps}>
                    <TextField source="id" />
                    <LinkField source="first_name" />
                    <LinkField source="last_name" />
                    <EmailField source="email" />
                    <PhoneField source="phone" />
                </Datagrid>
            </ScrollingWrapper>
        </List>
    );
}

Thank you for any sample code or link to do that!

Upvotes: 1

Views: 1200

Answers (2)

Danyil Suhak
Danyil Suhak

Reputation: 61

For decide this problem i used combination of styled components, useStyles and rowStyle for Datagrid.

StyledEmailField.js:

import {makeStyles} from "@material-ui/core/styles";
import {EmailField} from "react-admin";
import React from "react";
import classnames from 'classnames';

const useStyles = makeStyles({
    isDeleted: {
        textDecoration: "line-through",
    },
});

export const DatagridUsersProps = {
    rowStyle: (record, index) => {
        return {
            backgroundColor: (record.is_blocked) && "silver",
            color: (record.is_deleted) && "#616161",
        };
    }
};
export const StyledEmailField = props => {
    const classes = useStyles();
    return (
        <EmailField
            className={classnames({
                [classes.isDeleted]: props.record.is_deleted,
            })}
            {...props}
        />
    );
};

UseStales.js:

import React from "react";
import {makeStyles} from "@material-ui/core/styles";

export const stylesForUsersList = makeStyles({
    root: {
        "& td": {
            color: 'inherit',
        },
        "& table": {
            color: 'inherit',
        },
        "& td a, & td a span": {
            color: 'inherit',
        },
        "& td span": {
            color: 'inherit',
        }
    }
});

List.jsx:

import React from "react";
import { List, Datagrid, TextField, EditButton,usePermissions} from 'react-admin';

import { ScrollingWrapper } from '../../../components/ScrollingWrapper';
import { StyledEmailField } from '../../../components/fields/StyledEmailField';
import { CustomersFilter } from './ListFilters';
import {HideBlockUnblockButtonIfDeleted} from '../../../components/toolbars/BlockUnblockButton';
import DeleteRestoreButtons from '../../../components/toolbars/DeleteRestoreButtons';
import {DatagridUsersProps} from "../../../components/_helpers/props/DatagridProps";
import {stylesForUsersList,
} from "../../../components/_helpers/useStyles";
import {UserRole} from "../../../entities";

const defaultSort = { field: 'id', order: 'DESC' };


export const CustomersList = props => {
    const classes = stylesForUsersList()

    const { permissions } = usePermissions();
    if (!permissions) {
        return null;

    }
    return (
        <List
            {...props}
            sort={defaultSort}
            exporter={false}
            bulkActionButtons={false}
            filters={<CustomersFilter />}
            perPage={22}
            classes={classes}
        >
            <ScrollingWrapper>
                <Datagrid {...DatagridUsersProps}>
                    <TextField source="id" />
                    <TextField source="first_name" />
                    <TextField source="last_name" />
                    <StyledEmailField source="email" />     
                    <HideBlockUnblockButtonIfDeleted entity={"user"}/>
                    {(permissions.role === UserRole.admin) &&
                        <DeleteRestoreButtons/>}
                </Datagrid>
            </ScrollingWrapper>
        </List>
    );
}

Upvotes: 0

aftoru
aftoru

Reputation: 51

I believe you can override component class using their makeStyle hooks. Find the component class name using inspect element.

const useStyles = makeStyles({
table: {
    backgroundColor: 'Lavender',
},
headerCell: {
    backgroundColor: 'MistyRose',
}
cell: {
    backgroundColor: 'Pink',
}, });

as per their documentation here https://marmelab.com/react-admin/doc/3.19/Theming.html

you may want to override not only the root component style, but also the style of components inside the root. In this case, the className property isn’t enough. You can take advantage of the classes property to customize the classes that the component uses internally.

hope this helps

Upvotes: 1

Related Questions