I am using styled components.
I have
And this is fine expect one thing.. I want to style border-radius of that TextField
How can i do that?
import React from 'react';
import TextField from '#material-ui/core/TextField';
const Input = ({label}) => {
return (
<div>
<TextField style={{borderRadius: '90px'}} id="outlined-basic" label={label} variant="outlined" />
</div>
)
}
export default Input;
import React from "react";
import TextField from '#material-ui/core/TextField';
import { withStyles } from '#material-ui/core/styles';
const StyledTextField = withStyles({
root: {
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderRadius: `90px`,
},
},
},
})(TextField);
const Input = ({label}) => {
return (
<div>
<StyledTextField id="outlined-basic" label={label} variant="outlined" />
</div>
)
}
export default Input;
Related
I'm trying to change the color to border of mui's textfield to white. Can I do this somehow by using style={} in component or do I have to use makeStyles?
<TextField
label="Search login"
variant="outlined"
value={searchLogin}
inputProps={{
style: {
color:"white",
},
}}
InputLabelProps={{
style: {
color: "white",
borderColor : "white",
},
}}
onChange={(e) => {
setSearchLogin(e.target.value);
}}
/>
For those nested element you likely won't be able to use direct styling. Try following:
import * as React from "react";
import { ThemeProvider } from "#mui/system";
import TextField from "#mui/material/TextField";
import { createTheme } from "#material-ui/core/styles"
const styles = createTheme({
notchedOutline: {
borderWidth: "1px",
borderColor: "white !important"
}
});
export default function Example() {
return (
<ThemeProvider theme={styles}>
<TextField
label="Search login"
variant="outlined"
value={searchLogin}
onChange={(e) => { setSearchLogin(e.target.value); }}
/>
</ThemeProvider>
);
}
I have created a simple select component with menu items (material ui v 4.12). But the select component is being displayed entirely wrong. There are no console errors. What might be wrong here?
Here is the screenshot and the code.
import React, { useState } from "react";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Select from "#material-ui/core/InputLabel";
import MenuItem from "#material-ui/core/MenuItem";
import { makeStyles } from "#material-ui/core";
const mockData = ["list01", "list02"];
function TestPage() {
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
},
selectEmpty: {
marginTop: theme.spacing(2),
},
}));
const classes = useStyles();
const [data, setData] = useState("");
return (
<div className="test">
<h2>TEST</h2>
<FormControl
variant="outlined"
classes={{
root: classes.formControl,
}}
>
<InputLabel id="demo-simple-select-outlined-label">
Select list
</InputLabel>
<Select
id="test-select-outlined"
value={data}
onChange={(e) => setData(e.target.value)}
label="Select list"
>
{mockData.map((item, index) => (
<MenuItem key={index + 1} value={item}>
{item}
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
export default TestPage;
Your Select import is wrong:
import Select from "#material-ui/core/InputLabel";
just change it to:
import Select from "#material-ui/core/Select";
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!
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
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>
);
}
So im very new to programming with react and im struggling to redirect to a new page after hitting a button. Im working with react-hook-froms.
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import { useForm } from 'react-hook-form'
import BoardService from '../service/BoardService';
import React, { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(40),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(1),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function BoardName() {
useEffect(() => {
console.log("useEffect");
})
const [id, getId] = useState(1);
const history = useHistory();
const classes = useStyles();
const {register, handleSubmit} = useForm();
const onSubmit = (data) => {
let board = {
id: id,
name: data.boardName
}
console.log(board);
BoardService.createBoard(board.name, board);
history.push(`createboard/created`);
}
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Typography component="h1" variant="h5">
Name des Boards
</Typography>
<form className={classes.form} onSubmit={handleSubmit(onSubmit)} noValidate >
<TextField
variant="outlined"
margin="normal"
inputRef={register}
required
fullWidth
id="boardName"
label="Name"
name="boardName"
autoFocus
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
</form>
</div>
</Container>
);
}
the history.push isn't working in the onSubmit function and in the browser i keep getting the error: Unhandled Rejection (TypeError): Cannot read property 'push' of undefined.
I'm really stuck and not getting further. I'm happy for any help or advice. Thank you.
wrap your main index file with BrowserRouter using react-router-dom package
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
it should work.
I am trying to align a Placeholder to be centered within the Text-Field. Is there a way to do this? applying text-align: center to the input is not centering the placeholder.
You can use the &::placeholder pseudoselector on input classname like below
import React from "react";
import { makeStyles } from "#material-ui/core/styles";
import TextField from "#material-ui/core/TextField";
const useStyles = makeStyles(theme => ({
input: {
"&::placeholder": {
color: "red",
textAlign: "center"
}
}
}));
export default function Inputs() {
const classes = useStyles();
return (
<TextField
placeholder="Placeholder"
InputProps={{ classes: { input: classes.input } }}
/>
);
}
A working sandbox project link