I would like to change the color of the border of the input on focus, but not sure how to achieve it. I can change the styles the component but not when focusing. I´m using material-ui css option.
Here is the code so far:
....
<PhoneInput
country={'pt'}
localization={pt}
specialLabel={field.label}
value={phoneValue}
onChange={phone => setPhoneValue(phone)}
inputStyle={{
'&:focus': {
borderColor: 'red'
}
}}
/>
Sample:
Thanks!
You can change border color by placing a class to containerClass of PhoneInput component. That is, if you you use Material UI you can define a class as following
borderClass: {
"&.react-tel-input .form-control:focus": {
borderColor: "#69e781",
boxShadow: "0px 0px 0px 1px #69e781",
}
}
then use this class as follows
<PhoneInput
containerClass={classes.borderClass}
.
.
/>
or if you use a CSS file you can override the rule below in your CSS file
.react-tel-input .form-control:focus:
The styles on focusing the input of React-Phone-Input exists on .PhoneInputInput class on focus-visible property. In order to override this styling, access the PhoneInputInput Class.
Below example is for the devs using Material UI styled components.
".PhoneInputInput": {
"&:focus-visible": {
outline: "none",
},
}
Related
I am new to material ui.
I use fifth version.
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
'MuiInputBase-root': { // does not work
borderColor: 'red !important',
color: 'red !important',
},
'&:focus' : { // does not work
...
}
}
I could have used styled('input') and it works, I can set &:focus and it works but I can't type anything in the input.
I want to get rid of the initial border and set focus property.
How can I change the border for this class?
I know that in v5 we can style our components using variants or sx or styled.
What is the best advice for styling mui components? Because almost all the info in the internet uses outdated useStyle or makeStyles which doesn't work with react 18v.
sometimes I just struggle with components styling in mui
You have several ways to customize a Mui component, but my three favorite approaches are:
Styled utility
Sx prop
Custom global theme
So when should I use each of these approaches?
Styled utility
If you want to make a component reusable across your app, go with styled, if you had ever used styled components then styled will be very familiar to you, here is an example of how to use it:
import * as React from 'react';
import Slider, { SliderProps } from '#mui/material/Slider';
import { alpha, styled } from '#mui/material/styles';
// if you are using typescript, don't forget to pass the component props on styled
const SuccessSlider = styled(Slider)<SliderProps>(({ theme }) => ({
width: 300,
color: theme.palette.success.main,
// to override the styles of inner elements,
// you have to use the & selector followed by the class name.
'&.MuiSlider-thumb': {
'&:hover, &.Mui-focusVisible': {
boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`,
},
'&.Mui-active': {
boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`,
},
},
}));
export default function StyledCustomization() {
return <SuccessSlider defaultValue={30} />;
}
To make the component even more dynamically, you can define custom props as well, like width, color, border and so on, read the styled docs to know more about it.
Sx prop
If you want to make an one time off style in a single component, the easiest way is to use the sx prop, but be careful with this approach because it can lead to a lot of repetition in your code. Following the code you gave:
<InputBase
ref={params.InputProps.ref}
inputProps={params.inputProps}
autoFocus
sx={{
...InputCSS,
}}
/>
const InputCSS = {
width: '100%',
textIndent: '17px',
py: '12px',
fontSize: '20px',
borderRadius: '3px',
border: '1.5px solid rgba(0, 0, 0, 0.4)',
// you should pass the & selector followed by the class that you want to override
'&.MuiInputBase-root': {
// avoid the use of !important
borderColor: 'red',
color: 'red',
},
'&.MuiInputBase-root:focus': {
...
}
}
check it out on codeSandbox. Just a suggestion, depending on your case the component TextField could fit better as it comes with some good styles and you don't need to style it from scratch.
Side note:
Every mui component has an api doc with a css section where you can find all available classes to override, for instance, see the InputBase api docs, also read the docs about sx prop.
Custom theme
At last but not least, if you want to customize your whole app with custom palette, components, typography, breakpoints and so on, no doubt you should use a custom theme, as mui provides a powerful tool called createTheme to do so, what I like the most in custom theme is the possibility to make custom variants of the component, like so:
import * as React from "react";
import { createTheme, ThemeProvider } from "#mui/material/styles";
import Button from "#mui/material/Button";
import { red } from "#mui/material/colors";
// if you are using typescript, you must declare the module with the
// custom properties in order to get access of this property when using the component
declare module "#mui/material/Button" {
// define custom variants
interface ButtonPropsVariantOverrides {
dashed: true;
redVariant: true;
}
}
const defaultTheme = createTheme();
const theme = createTheme({
components: {
MuiButton: {
variants: [
{
// use the variant name defined earlier
props: { variant: "dashed" },
// set the styles for this variant
style: {
textTransform: "none",
border: `2px dashed ${defaultTheme.palette.primary.main}`,
color: defaultTheme.palette.primary.main
}
},
{
props: { variant: "redVariant" },
style: {
border: `2px solid ${red[300]}`,
color: red[600]
}
}
]
}
}
});
export default function GlobalThemeVariants() {
return (
// use the theme provider to get access of custom theme
// and variants within any child component
<ThemeProvider theme={theme}>
<Button variant="dashed" sx={{ m: 1 }}>
Dashed
</Button>
<Button variant="redVariant" color="secondary">
custom red variant
</Button>
</ThemeProvider>
);
}
See the example, also take a look at the custom theme docs. Hope I clarified the things a bit!
how to change style of material-ui-dropzone component using makeStyles?
my useStyle is:
const useStyles = makeStyles(theme => ({
DropzoneArea: {
fontWeight: 10,
margin:0,
padding:0
}
}
and in app.js i use this:
<DropzoneArea
acceptedFiles={['image/*']}
maxFileSize={10000000}
filesLimit={1}
dropzoneClass={classes.DropzoneArea}
/>
I don't think you can style it with makeStyles.
The best way is to grab the class name of the p element from inspector and style it. It worked for me.
.MuiDropzoneArea-text {
.....Your style here
}
Mark the style with "!important" if required.
You can use the following class:
dropzoneParagraphClass="dropzone-text"
In your .css file you can style the text:
.dropzone-text {
font-size: 100px !important; /* or something */
}
How apply style for class child in override theme?
I have this code
<button class="MuiButtonBase-root-359 MuiToggleButton-root-630 MuiToggleButton-selected-632" tabindex="0" type="button" value="1">
<span class="MuiToggleButton-label-633">Jan</span>
<span class="MuiTouchRipple-root-549"></span>
</button>
Here I have 3 css class (MuiButtonBase-root, MuiToggleButton-root and MuiToggleButton-selected)
So I need to apply a custom color to label inside "selected" class. I tried this override in my theme
MuiToggleButton: {
root:{
backgroundColor: '#5f5f5f'
},
selected: {
backgroundColor: '#a1b0e2a8 !important',
label: { //this not apply to "label" inside "selected" parent
color: '#0000ff !important'
}
},
label: {
selected: { //this not work too
color: '#ff0000 !important'
},
color: '#ffffff' //this apply to all MuiToggleButton-label css class
}
}
But after run "label" inside "selected" is not recognized, only "label" white. selected > label not work.
I look explication for this but only found css styles applied directly to the component or js code for this.
There any way for do this or is better apply the old css (file) way?
Using css file this work
button[class*="MuiToggleButton-selected"] span[class^="MuiToggleButton-label"]{
color: #0000ff;
}
I appreciate any resource (book, tutorial, etc) for giving me more knowledge about this.
Tks for advance
I found a similar question here
selected: {
backgroundColor: '#a1b0e2a8 !important',
'&>span': { // I need put > after &
color: '#0000ff !important'
}
},
So I'm trying to style the input field of a react-select component. Unfortunately, the font-family is being overwritten by the standard input element since the styles are being applied to the wrapper div and not the input field itself.
input: () => ({
fontFamily: `${theme.fonts.tabs.family} !important`,
fontWeight: theme.fonts.tabs.weight,
fontSize: 18,
color: theme.colors.secondary,
height: 24
}),
How would I go about changing the fontFamily without using class names?
What this code produces
What I want
React-Select renders the html input element inside the div that gets the class property that you assign when you use this input component styles.
So to extend your attempt, just add a child selector on your styles object, targeting that input.
input: () => ({
fontFamily: `${theme.fonts.tabs.family}`,
'& input': {
font: 'inherit',
},
}),
That way the rendered input inherits the font style from the div that receives the generated *-Input class.
You can use the following style-in-JS props:
control: base => ({
...base,
fontFamily: 'Times New Roman',
})
No need to use !important declaration.
EDIT
It seems to have an issue for the input and it does not render proper fontSize so have a complete experience you can add a className on your select like this:
<Select className="select" styles={styles} options={options} />
and apply the following CSS:
.select input {
font-family: "Times New Roman";
}
Here a live example.
I'm trying to figure out how to increase the font size of a label in my Material UI button in react.
I have a button setup:
import React from 'react';
import MyButton from '../materialui/Button.js';
const style = {
background: '#FF5349',
color: 'white',
padding: '0 30px',
textTransform: "uppercase",
};
const Start = () => (
<span>
<MyButton style={style} size="large">GET STARTED</MyButton>
</span>
);
export default Start;
I can't find a way to add font-size to the styles property.
Other stack overflow posts suggest doing it as an inline style using the style property, but that overrides my const definition.
If you don't want to add fontSize: '42px' to your styles object (probably because you want to reuse this somewhere else?) you can just build a new one with the style added for your button:
const Start = () => (
<span>
<MyButton style={{...style, fontSize: '42px'}} size="large">GET STARTED</MyButton>
</span>
);
I don't know if myButton in Material is the same of RaisedButton Anyway,
Button in Material-ui it's coming like Div > Button > Div > Div > span
So if you want to styling the button first of all you need to create a CSS class like
in your css file
This for styling button
.StylingButtonExample button{
background-color: red;
}
This for styling the text inside the button
.StylingButtonExample button div div span{
color: blue;
}
in react file
import RaisedButton from 'material-ui/RaisedButton';
<RaisedButton label="Default" className='StylingButtonExample' />
Hope this will help you and the others
Assuming the <MyButton /> Component is, in fact, the <RaisedButton /> Component that material-ui offers, you can simply apply your label styling to the labelStyle property.
Therefore, if you wanted to change the font-size to 42px, you could simply write it as follows:
<MyButton labelStyle={{ fontSize: '42px' }}>GET STARTED</MyButton>