Related
I have a project and in this project I have several interfaces and among these interfaces there is an interface to create a table and this table contains a set of data, but I got this error:
Material-UI: The key `wrapper` provided to the classes prop is not implemented in undefined.
How can i solve the problem?
This file contains the content of the table
jobsTable.js:
import { forwardRef, useRef, useEffect } from "react";
import Checkbox from "#material-ui/core/Checkbox";
import Table from "#material-ui/core/Table";
import PropTypes from "prop-types";
import TableBody from "#material-ui/core/TableBody";
import TableCell from "#material-ui/core/TableCell";
import TableContainer from "#material-ui/core/TableContainer";
import TableHead from "#material-ui/core/TableHead";
import TablePagination from "#material-ui/core/TablePagination";
import TableRow from "#material-ui/core/TableRow";
import TableSortLabel from "#material-ui/core/TableSortLabel";
import {
useGlobalFilter,
usePagination,
useRowSelect,
useSortBy,
useTable,
} from "react-table";
import clsx from "clsx";
import JobsTablePaginationActions from "./JobsTablePaginationActions";
const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
const defaultRef = useRef();
const resolvedRef = ref || defaultRef;
useEffect(() => {
resolvedRef.current.indeterminate = indeterminate;
}, [resolvedRef, indeterminate]);
return (
<>
<Checkbox ref={resolvedRef} {...rest} />
</>
);
});
const EnhancedTable = ({ columns, data, onRowClick }) => {
const {
getTableProps,
headerGroups,
prepareRow,
page,
gotoPage,
setPageSize,
state: { pageIndex, pageSize },
} = useTable(
{
columns,
data,
autoResetPage: true,
},
useGlobalFilter,
useSortBy,
usePagination,
useRowSelect,
(hooks) => {
hooks.allColumns.push((_columns) => [
// Let's make a column for selection
{
id: "selection",
sortable: false,
// The header can use the table's getToggleAllRowsSelectedProps method
// to render a checkbox. Pagination is a problem since this will select all
// rows even though not all rows are on the current page. The solution should
// be server side pagination. For one, the clients should not download all
// rows in most cases. The client should only download data for the current page.
// In that case, getToggleAllRowsSelectedProps works fine.
Header: ({ getToggleAllRowsSelectedProps }) => (
<div>
<IndeterminateCheckbox {...getToggleAllRowsSelectedProps()} />
</div>
),
// The cell can use the individual row's getToggleRowSelectedProps method
// to the render a checkbox
Cell: ({ row }) => (
<div>
<IndeterminateCheckbox
{...row.getToggleRowSelectedProps()}
onClick={(ev) => ev.stopPropagation()}
/>
</div>
),
},
..._columns,
]);
}
);
const handleChangePage = (event, newPage) => {
gotoPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setPageSize(Number(event.target.value));
};
// Render the UI for your table
return (
<div
style={{
// padding: "2rem",
border: "solid 1px #e8e4e4",
}}
className="flex flex-col min-h-full sm:rounded-16 overflow-hidden"
>
<TableContainer className="flex flex-1">
<Table {...getTableProps()}>
<TableHead>
{headerGroups.map((headerGroup) => (
<TableRow {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<TableCell
className="whitespace-nowrap p-4 md:p-12"
{...(!column.sortable
? column.getHeaderProps()
: column.getHeaderProps(column.getSortByToggleProps()))}
>
{column.render("Header")}
{column.sortable ? (
<TableSortLabel
active={column.isSorted}
// react-table has a unsorted state which is not treated here
direction={column.isSortedDesc ? "desc" : "asc"}
/>
) : null}
</TableCell>
))}
</TableRow>
))}
</TableHead>
<TableBody>
{page.map((row, i) => {
prepareRow(row);
return (
<TableRow
{...row.getRowProps()}
onClick={(ev) => onRowClick(ev, row)}
className="truncate cursor-pointer"
>
{row.cells.map((cell) => {
return (
<TableCell
{...cell.getCellProps()}
className={clsx("p-4 md:p-12", cell.column.className)}
>
{cell.render("Cell")}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
component="div"
classes={{
root: "flex-shrink-0 border-t-1",
}}
rowsPerPageOptions={[
5,
10,
25,
{ label: "All", value: data.length + 1 },
]}
colSpan={5}
count={data.length}
rowsPerPage={pageSize}
page={pageIndex}
SelectProps={{
inputProps: { "aria-label": "rows per page" },
native: false,
}}
onPageChange={handleChangePage}
onRowsPerPageChange={handleChangeRowsPerPage}
ActionsComponent={JobsTablePaginationActions}
/>
</div>
);
};
EnhancedTable.propTypes = {
columns: PropTypes.array.isRequired,
data: PropTypes.array.isRequired,
onRowClick: PropTypes.func,
};
export default EnhancedTable;
This file contains the header of the table
jobLists.js:
import { motion } from "framer-motion";
import FuseUtils from "#fuse/utils";
import Avatar from "#material-ui/core/Avatar";
import Icon from "#material-ui/core/Icon";
import IconButton from "#material-ui/core/IconButton";
import Typography from "#material-ui/core/Typography";
import { useMemo, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { deleteJob } from "./store/jobsSlice";
import JobsMultiSelectMenu from "./JobsMultiSelectMenu";
import JobsTable from "./JobsTable";
import { makeStyles } from "#material-ui/core/styles";
import Slide from "#material-ui/core/Slide";
import {
openEditJobDialog,
removeContact,
toggleStarredContact,
selectJobs,
} from "./store/jobsSlice";
import { useSnackbar } from "notistack";
const useStyles = makeStyles({
button1: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#43a047",
color: "#e8e4e4",
transition: "0.3s",
borderColor: "#43a047",
},
},
button2: {
backgroundColor: "none",
"&:hover": {
backgroundColor: "#e53935",
color: "#e8e4e4",
transition: "0.3s",
borderColor: "#e53935",
},
},
});
// const onRejectUser = useCallback((id) => {
// dispatch(rejectUser(id));
// }, []);
function JobsList(props) {
const dispatch = useDispatch();
const classes = useStyles();
const contacts = useSelector(selectJobs);
const searchText = useSelector(({ jobsApp }) => jobsApp.jobs.searchText);
const user = useSelector(({ jobsApp }) => jobsApp.user);
const { selectedJobsIds } = props;
const [filteredData, setFilteredData] = useState(null);
const { enqueueSnackbar, closeSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar(
"User accepted",
{ variant: "success" },
{
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
},
{ TransitionComponent: Slide }
);
};
const deleteJobHandleClick = () => {
enqueueSnackbar(
"Job Deleted successfully",
{ variant: "error" },
{
anchorOrigin: {
vertical: "top",
horizontal: "right",
},
},
{ TransitionComponent: Slide }
);
};
const columns = useMemo(
() => [
{
Header: "ID",
accessor: "id",
className: "font-medium",
sortable: true,
align: "left",
},
{
Header: "Job Title",
accessor: "name",
className: "font-medium",
sortable: true,
align: "center",
},
{
Header: "Description",
accessor: "description",
sortable: true,
align: "center",
},
{
id: "action",
// width: 128,
align: "right",
sortable: false,
Cell: ({ row }) => (
<div className="flex items-center">
{/* <IconButton
onClick={(ev) => {
ev.stopPropagation();
dispatch(approveUser(row.original.id));
dispatch(toggleStarredContact(row.original.id));
handleClick(ev);
dispatch(toggleStarredContact(row.original.id));
}}
style={{ color: "green", border: "none" }}
>
<Icon>edit</Icon>
</IconButton> */}
<IconButton
onClick={(ev) => {
ev.stopPropagation();
dispatch(deleteJob(row.original.id));
deleteJobHandleClick(ev);
}}
// className={classes.button2}
style={{ color: "red", border: "none" }}
>
<Icon>delete</Icon>
</IconButton>
</div>
),
},
],
[dispatch, user.starred]
);
useEffect(() => {
function getFilteredArray(entities, _searchText) {
if (_searchText.length === 0) {
return contacts;
}
return FuseUtils.filterArrayByString(contacts, _searchText);
}
if (contacts) {
setFilteredData(getFilteredArray(contacts, searchText));
}
}, [contacts, searchText]);
if (!filteredData) {
return null;
}
if (filteredData.length === 0) {
return (
<div className="flex flex-1 items-center justify-center h-full">
<Typography color="textSecondary" variant="h5">
There are no Jobs!
</Typography>
</div>
);
}
return (
<motion.div
initial={{ y: 20, opacity: 0 }}
animate={{ y: 0, opacity: 1, transition: { delay: 0.2 } }}
>
<JobsTable
columns={columns}
data={filteredData}
onRowClick={(ev, row) => {
if (row) {
dispatch(openEditJobDialog(row.original));
}
}}
/>
</motion.div>
);
}
export default JobsList;
The logo is not showing on my AppBar for some reason. Here's what I am getting:
This is my code:
import {
AppBar,
Toolbar,
Typography,
makeStyles,
Button,
IconButton,
Drawer,
Link,
MenuItem,
} from "#material-ui/core";
import MenuIcon from "#material-ui/icons/Menu";
import React, { useState, useEffect } from "react";
import { Link as RouterLink } from "react-router-dom";
import logo from '../overland-ninja-logo.png';
const headersData = [
{
label: "Listings",
href: "/listings",
},
{
label: "Mentors",
href: "/mentors",
},
{
label: "My Account",
href: "/account",
},
{
label: "Log Out",
href: "/logout",
},
];
const useStyles = makeStyles(() => ({
header: {
backgroundColor: "#400CCC",
paddingRight: "79px",
paddingLeft: "118px",
"#media (max-width: 900px)": {
paddingLeft: 0,
},
},
logo: {
fontFamily: "Work Sans, sans-serif",
fontWeight: 600,
color: "#FFFEFE",
textAlign: "left",
},
menuButton: {
fontFamily: "Open Sans, sans-serif",
fontWeight: 700,
size: "18px",
marginLeft: "38px",
},
toolbar: {
display: "flex",
justifyContent: "space-between",
},
drawerContainer: {
padding: "20px 30px",
},
}));
export default function Header() {
const { header, logo, menuButton, toolbar, drawerContainer } = useStyles();
const [state, setState] = useState({
mobileView: false,
drawerOpen: false,
});
const { mobileView, drawerOpen } = state;
useEffect(() => {
const setResponsiveness = () => {
return window.innerWidth < 900
? setState((prevState) => ({ ...prevState, mobileView: true }))
: setState((prevState) => ({ ...prevState, mobileView: false }));
};
setResponsiveness();
window.addEventListener("resize", () => setResponsiveness());
}, []);
const displayDesktop = () => {
return (
<Toolbar className={toolbar}>
{femmecubatorLogo}
<div>{getMenuButtons()}</div>
</Toolbar>
);
};
const displayMobile = () => {
const handleDrawerOpen = () =>
setState((prevState) => ({ ...prevState, drawerOpen: true }));
const handleDrawerClose = () =>
setState((prevState) => ({ ...prevState, drawerOpen: false }));
return (
<Toolbar>
<IconButton
{...{
edge: "start",
color: "inherit",
"aria-label": "menu",
"aria-haspopup": "true",
onClick: handleDrawerOpen,
}}
>
<MenuIcon />
</IconButton>
<Drawer
{...{
anchor: "left",
open: drawerOpen,
onClose: handleDrawerClose,
}}
>
<div className={drawerContainer}>{getDrawerChoices()}</div>
</Drawer>
<div>{femmecubatorLogo}</div>
</Toolbar>
);
};
const getDrawerChoices = () => {
return headersData.map(({ label, href }) => {
return (
<Link
{...{
component: RouterLink,
to: href,
color: "inherit",
style: { textDecoration: "none" },
key: label,
}}
>
<MenuItem>{label}</MenuItem>
</Link>
);
});
};
const femmecubatorLogo = (
<img src={logo} />
);
const getMenuButtons = () => {
return headersData.map(({ label, href }) => {
return (
<Button
{...{
key: label,
color: "inherit",
to: href,
component: RouterLink,
className: menuButton,
}}
>
{label}
</Button>
);
});
};
return (
<header>
<AppBar className={header}>
{mobileView ? displayMobile() : displayDesktop()}
</AppBar>
</header>
);
}
I am quite new to react and I am sort of confused about how to go about this. I have tried all the tutorials but can't find the right solution. Any help would be much appreciated.
You are reassigning the value of logo after importing the image.
import logo from "../overland-ninja-logo.png"; // value of logo is correctly assigned to a path to the image
...
const useStyles = makeStyles(() => ({
logo: {
fontFamily: "Work Sans, sans-serif",
fontWeight: 600,
color: "#FFFEFE",
textAlign: "left"
},
}));
...
const { header, logo, menuButton, toolbar, drawerContainer } = useStyles(); // value of logo is incorrectly assigned to a an object
If you are using vscode, you should get a typescript warning at import logo:
'logo' is declared but its value is never read.ts(6133)
I am using React-Select in my first React App and I am not sure how to handle multiple selects in one form.
Is there anyway to pass props into the ReactSelect.jsx file so that I can have multiple selects in one form, each with their own attributes/data?
What is the proper way to deal with this?
Ref: Experimental Popout
App.js
import React from 'react';
import ReactSelect from './ReactSelect'
function App() {
return (
<ReactSelect name="select1" placeholder="Select 1" label="Select 1" data={} />
<ReactSelect name="select2" placeholder="Select 2" label="Select 2" data={} />
<ReactSelect name="select3" placeholder="Select 3" label="Select 3" data={} />
);
}
export default App;
ReactSelect.jsx
/** #jsx jsx */
import { Component } from 'react';
import { jsx } from '#emotion/core';
import Button from '#atlaskit/button';
import CreatableSelect from 'react-select/creatable';
import { defaultTheme } from 'react-select';
const { colors } = defaultTheme;
const selectStyles = {
control: provided => ({ ...provided, minWidth: 240, margin: 8 }),
menu: () => ({ boxShadow: 'inset 0 1px 0 rgba(0, 0, 0, 0.1)' }),
};
const State = {
isOpen: false,
options: [{ [""]: "" }],
value: "",
isLoading: false,
};
const createOption = (label = "") => ({
value: label.toLowerCase().replace(/\W/g, ''),
label,
});
const groupStyles = {
width: '100%',
textAlign: 'left',
borderRadius: 4,
backgroundColor: 'white',
border: '1px solid #ced4da',
};
const options=[
{ value: 'one', label: 'One' },
{ value: 'two', label: 'Two' },
{ value: 'three', label: 'Three' },
];
export default class ReactSelect extends Component {
state = {
isOpen: false,
options: options,
value: undefined,
isLoading: false,
};
toggleOpen = () => {
this.setState(state => ({ isOpen: !state.isOpen }));
};
onSelectChange = value => {
this.toggleOpen();
this.setState({ value });
console.log(value.value);
};
handleCreate = (inputValue = "") => {
this.setState({ isLoading: true });
setTimeout(() => {
const { options } = this.state;
const newOption = createOption(inputValue);
const newOptions = [...options, newOption];
newOptions.sort((a, b) =>
a.value.localeCompare(b.value)
);
this.setState(state => ({
isOpen: false,
options: newOptions,
value: newOption
}));
this.setState({ isLoading: false });
}, 1000);
}
render() {
const { isOpen, options, value, isLoading } = this.state;
return (
<Dropdown
isOpen={isOpen}
onClose={this.toggleOpen}
target={
<Button
iconAfter={<ChevronDown />}
onClick={this.toggleOpen}
isSelected={isOpen}
style={groupStyles}>
{value ? `Location: ${value.label}` : 'Select a Location'}
</Button>
}>
<CreatableSelect
backspaceRemovesValue={false}
components={{ DropdownIndicator, IndicatorSeparator: null }}
controlShouldRenderValue={true}
hideSelectedOptions={false}
isClearable={true}
menuIsOpen
isLoading={isLoading}
isDisabled={isLoading}
onChange={this.onSelectChange}
onCreateOption={this.handleCreate}
options={options}
placeholder="Search..."
styles={selectStyles}
tabSelectsValue={false}
value={value} />
</Dropdown>
);
}
}
// styled components
const Menu = props => {
const shadow = 'hsla(218, 50%, 10%, 0.1)';
console.log(props);
return (
<div
css={{
backgroundColor: 'white',
borderRadius: 4,
boxShadow: `0 0 0 1px ${shadow}, 0 4px 11px ${shadow}`,
marginTop: 8,
position: 'absolute',
zIndex: 2,
width:'100%',
}}
{...props}
/>
);
};
const Blanket = props => (
<div
css={{
bottom: 0,
left: 0,
top: 0,
right: 0,
position: 'fixed',
zIndex: 1,
}}
{...props}
/>
);
const Dropdown = ({ children, isOpen, target, onClose }) => (
<div css={{ position: 'relative' }}>
{target}
{isOpen ? <Menu>{children}</Menu> : null}
{isOpen ? <Blanket onClick={onClose} /> : null}
</div>
);
The following seems to work for me...
this.props.name
this.props.placeholder
this.props.data
Example: To set the placeholder
{value ? `${this.props.placeholder} ${value.label}` : this.props.placeholder}
how can i set pagination arrows to be enabled even there is no data or even if i'll use a condition to switch disable/enablePagination Arrows
import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import { NavLink } from 'react-router-dom';
import Truncate from 'react-truncate';
// Material-UI
import { withStyles } from '#material-ui/core/styles';
import Button from '#material-ui/core/Button';
import AddIcon from '#material-ui/icons/Add';
import EditIcon from '#material-ui/icons/Edit';
import MaterialTable, { MTableToolbar, TablePagination } from 'material-table';
import IconButton from '#material-ui/core/IconButton';
import Tooltip from '#material-ui/core/Tooltip';
import Typography from '#material-ui/core/Typography';
import Zoom from '#material-ui/core/Zoom';
// Components
import Entity from '~/Components/Entity';
import violationsStyles from './styles';
import Strings from '~/Services/Strings';
// Services
import Navigate from '~/Services/Navigate';
#withStyles(violationsStyles)
class Violations extends React.Component {
state = {
data : [],
pageIndex: 0,
pageSize: 1,
totalCount: 0
}
componentDidMount() {
this.get();
}
get() {
const { pageIndex, pageSize } = this.state;
this.entity.get({ pageIndex, pageSize });
}
get options() {
return {
actionsColumnIndex: -1,
pageSize: 10,
filtering: true,
columnsButton: true,
maxBodyHeight: 550,
doubleHorizontalScroll: true,
headerStyle: {
color: '#434343',
fontSize: 13
}
};
}
get localization() {
return {
header: {
actions: '',
},
body: {
emptyDataSourceMessage: Strings.listEmptyLabel,
},
pagination: {
labelRowsPerPage: Strings.rowsPerPageLabel,
labelDisplayedRows: `{from}-{to} ${Strings.fromText} {count}`,
},
toolbar: {
addRemoveColumns: Strings.addRemoveColumns,
showColumnsTitle: Strings.showColumnsTitle
},
};
}
get columns() {
const { classes } = this.props;
return [
{ title: Strings.violationReferenceNumber, field: 'referenceNumber', cellStyle: { width: 110 } },
{
title: Strings.violationDescription,
field: 'description',
render: rowData => (
<Typography>
<Truncate lines={1} ellipsis={<span>... </span>}>
{rowData.description}
</Truncate>
</Typography>
),
cellStyle: { paddingLeft: 0 }
},
{ title: Strings.violationPenalty,
field: 'penaltyTypeId',
lookup: {
1: Strings.inform,
2: Strings.alert,
3: Strings.suspension,
},
cellStyle: { width: '120px' }
},
{
title: Strings.violationStatus,
field: 'isArchived',
lookup: {
false: Strings.violationIsNotSettled,
true: Strings.violationIsSettled,
},
cellStyle: { width: '130px' },
defaultFilter: [ 'false' ]
},
{
title: Strings.listActionsLabel,
field: 'isArchived',
render: rowData => (
<div className={classes.iconWrapper}>
<Choose>
<When condition={rowData.isArchived === 'true'}>
<Tooltip TransitionComponent={Zoom} title={Strings.violationEditActionOn}>
<span>
<IconButton disabled={rowData.isArchived === 'true'}>
<EditIcon fontSize="default"/>
</IconButton>
</span>
</Tooltip>
</When>
<Otherwise>
<IconButton disabled={rowData.isArchived === 'true' ? true : false} onClick={() => Navigate.go(`/violations/editor/${rowData.id}`)}>
<Tooltip TransitionComponent={Zoom} title={Strings.violationListEditLabel}>
<EditIcon fontSize="default"/>
</Tooltip>
</IconButton>
</Otherwise>
</Choose>
</div>
),
filtering: false,
cellStyle: { paddingLeft: 35, paddingRight: 75, textAlign: 'left', justifyContent: 'flex-end', display: 'flex' },
headerStyle: { paddingLeft: 35, textAlign: 'left', }
},
];
}
get components() {
const { classes } = this.props;
return {
Toolbar: props => (
<div className={classes.toolbar}>
<MTableToolbar {...props} />
<div className={classes.customActionsBar}>
<Button component={NavLink} to={'/violations/editor'} variant={'outlined'} color={'primary'}>
<AddIcon className={classes.rightIcon} />
{Strings.addNewViolation}
</Button>
</div>
<div className={classes.tabelSecondHeader}>
<Typography variant='h6'>
{Strings.listOfViolations}
</Typography>
</div>
</div>
),
Pagination: props => (
<TablePagination {...props}
count={this.state.totalCount}
/>
),
};
}
onEntityReceived(data) {
const arr = data.result;
const mutableList = [];
if(arr && arr.length > 0) {
arr.map(item => {
mutableList.push({
...item,
isArchived: item.isArchived.toString()
});
});
this.setState({
data: mutableList,
totalCount: data.totalCount
});
}
}
render() {
const { data } = this.state;
return (
<React.Fragment>
<Helmet>
<title>
{Strings.violationsManegment}
</title>
</Helmet>
<Entity
storeId={'Supervision-Violations'}
entityRef={ref => { this.entity = ref; }}
onEntityPosted={() => this.onEntityPosted()}
onEntityReceived={data => this.onEntityReceived(data)}
render={store => (
<MaterialTable
title={Strings.violationsManegment}
data={data}
isLoading={store.loading}
options={this.options}
localization={this.localization}
columns={this.columns}
components={this.components}
onChangePage={pageIndex => this.setState({ pageIndex })}
onChangeRowsPerPage={pageSize => this.setState({ pageSize })}
/>
)}
/>
</React.Fragment>
);
}
}
Violations.propTypes = {
classes: PropTypes.object,
};
export default Violations;
i need to update the count of table because i'm getting the data from back-end and i'm using server side pagination technique and it appears that the total counts automatically be the total rows received unless i mutated it to be be total count that i received from endpoint because i receive some data per page
Use nextIconButtonProps={{disabled:false}} and backIconButtonProps={{disabled:false}}
could you try using the override that is explained here https://material-table.com/#/docs/features/component-overriding.
Use the code above to try to find a way of that you want. Right now there isnt a property that you can do that in a easy way.
components={{
Pagination: props => (
<TablePagination
{...props}
rowsPerPageOptions={[5, 10, 20, 30]}
rowsPerPage={this.state.numberRowPerPage}
count={this.state.totalRow}
page={
firstLoad
? this.state.pageNumber
: this.state.pageNumber - 1
}
onChangePage={(e, page) =>
this.handleChangePage(page + 1)
}
onChangeRowsPerPage={event => {
props.onChangeRowsPerPage(event);
this.handleChangeRowPerPage(event.target.value);
}}
/>
),
}}
I'm trying to change the color of the label text in Textfield but I can't seem to figure it out.
Here is what I'm trying:
<TextField
value={value}
key={name}
label={label}
id={id}
name={name}
InputLabelProps={{
shrink: true,
FormLabelClasses: {
'root': {
'&:focused': {
color: 'white'
}
},
focused: 'true'
}
}}
/>
Can someone give me a pointer on what I'm doing wrong here?
I've also tried using the MuiThemeProvider but can't seem to figure that one out either:
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
focused: true,
root: {
'&.focused': {
color: 'white'
}
}
}
}
});
How can I change the color of the Label? In this photo, I want the "Notes" to match the color of the underline
Thanks for your help!
Tim!
Here is the snippet that should help you.
const {
TextField,
createMuiTheme,
MuiThemeProvider,
CssBaseline,
} = window['material-ui'];
const theme = createMuiTheme({
overrides: {
MuiFormLabel: {
root: {
"&$focused": {
color: "tomato",
fontWeight: "bold"
}
},
focused: {}
}
}
});
class Index extends React.Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}
ReactDOM.render(<Index />, document.getElementById('root'));
<script src="https://unpkg.com/react#latest/umd/react.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom#latest/umd/react-dom.development.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.development.js" crossorigin="anonymous"></script>
<div id="root"></div>
Another way of doing it without the override is to have:
const textStyles = makeStyles({
root: {
"& .Mui-focused": {
color: "tomato",
fontWeight: "bold"
},
});
class Index extends React.Component {
const TextClass = textStyles()
render() {
return (
<MuiThemeProvider theme={theme}>
<div>
<CssBaseline />
<TextField className={textStyles.root} label="Text field" InputLabelProps={{shrink:true}} />
</div>
</MuiThemeProvider>
);
}
}
for v5 of #mui this code works
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
root: {
fontWeight: 'bold',
"&.Mui-focused": {
color: 'rgba(0, 0, 0, 0.87)',
},
},
}
},
MuiTextField: {
defaultProps: {
variant: 'standard',
},
},
},