I would like to remove the bottom border of TextField of Fluent UI. I tried the following code, but it did not work.
import "./styles.css";
import { TextField } from "#fluentui/react";
export default function App() {
return (
<TextField
style={{
textarea: { border: "none", borderBottom: "none" },
input: { border: "none", borderBottom: "none" }
}}
/>
);
}
Could anyone help?
PS: CodeSandbox: https://codesandbox.io/s/epic-ramanujan-0jcsw1?file=/src/App.js:0-280
The border is defined on the fieldGroup element of the TextField. So this should work using the ITextFieldStyles interface:
import "./styles.css";
import { TextField } from "#fluentui/react";
export default function App() {
return (
<TextField
styles={{
fieldGroup: { borderBottom: "none" }
}}
/>
);
}
Adjusted sandbox: https://codesandbox.io/s/romantic-chandrasekhar-rp3x8f?file=/src/App.js:0-210
Try with this code on your .css
.no-border {
border-bottom: none;
outline: none;
}
and this on your code
import "./styles.css";
import { TextField } from "#fluentui/react";
export default function App() {
return <TextField className="no-border" />;
}
Related
I want to set a default background color that will apply to all created pages in my project.
I have tried the following tutorial: https://itnext.io/next-js-with-material-ui-7a7f6485f671 but it does not work and gives this error: Error
Here are my files:
Index.tsx file:
import LoginPage from "./login";
export default function Start() {
return (<div ><LoginPage></LoginPage></div>);
}
Login.tsx file
import Typography from "#mui/material/Typography"
import React from 'react';
import { makeStyles } from '#mui/styles';
import { Button, TextField } from "#mui/material";
const useStyles = makeStyles(theme => ({
root: {
display: "inline-grid",
margin: "auto",
position:"fixed",
top: "50%",
left: "50%",
width:"30em",
height:"18em",
marginTop: "-9em",
marginLeft: "-15em",
border: "1px solid #ccc",
},
loginButton: {
border: "1px solid #ccc",
width: "30%",
height: "80%",
margin: "auto"
},
loginText: {
margin: "auto"
}
}));
export default function LoginPage() {
const classes = useStyles();
return (
<>
<div className={classes.root}>
<Typography className ={classes.loginText}>Login</Typography>
<TextField id="filled-basic" label="Email Adresse" variant="standard"></TextField>
<TextField id="filled-basic" label="Passwort" variant="standard" />
<Button className={classes.loginButton}>Login</Button>
</div>
</>
);
}
useTheme.ts file:
import { createTheme } from "#mui/material/styles";
// Create a theme instance.
const theme = createTheme ({
palette: {
primary: {
main: '#556cd6',
},
secondary: {
main: '#19857b',
},
background: {
default: '#fff',
},
},
});
export default theme;
_app.tsx and _document.tsx are the same as in the tutorial provided in the link above
That's how my folder looks like with all files in
How can I fix the error that I am getting?
I have a TextField defined as follows:
<TextField
id="standard-with-placeholder"
label="First Name"
className={classes.textField}
margin="normal"
/>
And it looks like this:
But I want it look like this:
The "First Name" text is larger. How can I adjust the label text size? Currently my styles object is empty. I think that should be where the CSS to do this should go, but I'm unsure what the css would look like for the label text.
Thanks
Here's an example of how to modify the label font size in v4 of Material-UI (v5 example further down). This example also modifies the font-size of the input on the assumption that you would want those sizes to be in sync, but you can play around with this in the sandbox to see the effects of changing one or the other.
import React from "react";
import ReactDOM from "react-dom";
import TextField from "#material-ui/core/TextField";
import { withStyles } from "#material-ui/core/styles";
const styles = {
inputRoot: {
fontSize: 30
},
labelRoot: {
fontSize: 30,
color: "red",
"&$labelFocused": {
color: "purple"
}
},
labelFocused: {}
};
function App({ classes }) {
return (
<div className="App">
<TextField
id="standard-with-placeholder"
label="First Name"
InputProps={{ classes: { root: classes.inputRoot } }}
InputLabelProps={{
classes: {
root: classes.labelRoot,
focused: classes.labelFocused
}
}}
margin="normal"
/>
</div>
);
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);
Below is an equivalent example for v5 of Material-UI using styled instead of withStyles:
import React from "react";
import ReactDOM from "react-dom";
import MuiTextField from "#material-ui/core/TextField";
import { inputClasses } from "#material-ui/core/Input";
import { inputLabelClasses } from "#material-ui/core/InputLabel";
import { styled } from "#material-ui/core/styles";
const TextField = styled(MuiTextField)(`
.${inputClasses.root} {
font-size: 30px;
}
.${inputLabelClasses.root} {
font-size: 30px;
color: red;
&.${inputLabelClasses.focused} {
color: purple;
}
}
`);
function App() {
return (
<div className="App">
<TextField
id="standard-with-placeholder"
label="First Name"
margin="normal"
variant="standard"
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Here are the relevant parts of the documentation:
https://material-ui.com/api/text-field/
https://material-ui.com/api/input/
https://material-ui.com/api/input-label/
https://material-ui.com/api/form-label/
You can target the textfield label like this:
.MuiFormLabel-root {
font-size: 20px !important;
}
I want to override the MuiBox-root style for the whole application.According to the official documentation I need to identify the class:
And among other things I can override it:
But if I proceed this way, it just removes the styling. What am I doing wrong here?
This will do:
import { withStyles } from "#material-ui/core/styles";
const styles = {
root: {
padding: "10px"
}
};
function App({ classes }) {
return <yourelement className={classes.root}>xyz...<yourelement/>;
}
export default withStyles(styles)(App);
You can use the sx property on the Box component. For example:
<Box sx={{ padding: "10px" }}>
<YourChildComponents/>
</Box>
Lets say aim is to override background css field of root background css field.
Below are the steps
import { makeStyles } from '#mui/styles';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
},
});
export default function testFunction() {
const classes = useStyles();
return <Button className={classes.root}>Hook</Button>;
}
Hope this will help.
Is it possible to style Material-UI without using the makeStyles feature, for example, css? Just trying to understand how Material-UI style works.
The red style on the bottom is the style I'm trying to achieve with simple css here.
Below is an example of how to customize the various colors in an outlined select using simple CSS.
styles.css
.customSelect {
width: 200px;
}
.customSelect .MuiInputLabel-root {
color: red;
}
.customSelect .MuiInputBase-input {
color: green;
}
.customSelect .MuiOutlinedInput-notchedOutline {
border-color: red;
}
.customSelect:hover .MuiOutlinedInput-notchedOutline {
border-color: orange;
}
.customSelect
.MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline {
border-color: purple;
}
.customSelectMenu .MuiMenuItem-root {
color: blue;
}
App.js
import React from "react";
import "./styles.css";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
export default function App() {
const [value, setValue] = React.useState("");
return (
<TextField
className="customSelect"
label="Sale Type"
required
select
value={value}
onChange={event => setValue(event.target.value)}
variant="outlined"
SelectProps={{ MenuProps: { className: "customSelectMenu" } }}
>
<MenuItem value={1}>Sale Type 1</MenuItem>
<MenuItem value={2}>Sale Type 2</MenuItem>
</TextField>
);
}
Related answers:
Change border color on Material-UI TextField
Global outlined override
Change outline for OutlinedInput with React material-ui
I created my own theme
import { createMuiTheme } from 'material-ui/styles';
export const MyTheme = createMuiTheme({
palette: {
primary: {
light: '#757ce8',
main: '#3f50b5',
dark: '#002884',
contrastText: '#fff',
},
secondary: {
light: '#ff7961',
main: '#f44336',
dark: '#ba000d',
contrastText: '#000',
},
error: {
light: '#FF5F57',
main: '#CE160C',
dark: '#380300',
//contrastText: will be calculated to contast with palette.primary.main
}
}
});
Using it in my app
<MuiThemeProvider theme={MyTheme}>
<AppContainer>
<BrowserRouter children={ routes } basename={ baseUrl } />
</AppContainer>
</MuiThemeProvider>
But how can I change MenuItem hover style in Menu and Select using a theme?
Implemented hover and selected items styles using a theme
export const MyTheme = createMuiTheme({
palette: {
action: {
selected: '#E7A615',
hover: '#FFD371',
disabled: '#9B9B9B'
}
}
});
You can use simple CSS trick to change the MenuItem color on hover
Here is sample code
import React from 'react';
import './testJS.css'
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
class TestJS extends React.Component {
constructor(props) {
super(props);
}
render() {
return(
<div id="root">
<Menu>
<MenuItem primaryText="Maps" className="menu-item" />
<MenuItem primaryText="Books" className="menu-item" />
<MenuItem primaryText="Flights" className="menu-item" />
<MenuItem primaryText="Apps" className="menu-item" />
</Menu>
</div>
)};
}
export default TestJS;
and add following lines in your CSS file, need to use !important in order to override the default material-UI CSS
.menu-item{
background: #dcdcdc !important;
}
.menu-item:hover{
background: #0e7be9 !important;
}