import { createStyles, Theme } from '#material-ui/core/styles';
export default (theme: Theme) => {
const { primary } = theme.palette;
return createStyles({
test1: {
fontSize: '30px',
},
test2: {
'& > div': {
color: primary.main,
marginTop: '20px',
},
},
});
};
Here I want to use class test1 in test2. How should I extend it?
You can use the dollar sign to reference the other selector when using JSS:
test1: {
width: 50,
height: 50,
backgroundColor: "pink",
"& $test2": {
backgroundColor: "red"
}
},
test2: {
width: 30,
height: 30
}
Reference
https://cssinjs.org/jss-plugin-nested?v=v10.8.1#use-rulename-to-reference-a-local-rule-within-the-same-style-sheet
Related
I have the following code which for the palette works but for the typography doesn't, although it doesn't throw an error:
Step by step:
Import the module
import "#mui/material/styles/createTypography";
Declare it and create the additional option
declare module "#mui/material/styles/createTypography" {
interface TypographyOptions {
tab?: React.CSSProperties;
}
}
add the option to the theme:
const theme = createTheme({
typography: {
h3: {
fontWeight: typographyFonts.H3,
// color: themePalette.ARCBLUE,
},
tab: {
fontFamily: "Raleway",
},
},
});
I don't get an error here, which I did before, but when I build a component and use it I get an error that "tab" does not exist:
This is how I use it in the other component for styling
const StyledTab = styled(Tab)(() => ({
...theme.typography,
textTransform: "none",
fontWeight: "700",
fontSize: "1rem",
minWidth: 10,
marginLeft: "25px",
}));
The makeStyles function argument has a parameter that you can use:
const useStyles = makeStyles((theme: Theme) => ({
logo: {
height: "5em",
},
tabsContainer: {
...theme.typography.tab,
marginLeft: "auto",
color: "white",
},
}));
or (you updated the code as I was writing):
const StyledTab = styled(Tab)((theme: Theme) => ({
...theme.typography,
textTransform: "none",
fontWeight: "700",
fontSize: "1rem",
minWidth: 10,
marginLeft: "25px",
}));
Also, ensure your application is wrapped in :
<ThemeProvider theme={theme}>
...
</ThemeProvider>
Also if your using v5, your overrides should look like this:
declare module '#mui/material/styles' {
interface TypographyVariants {
tab: React.CSSProperties;
}
// allow configuration using `createTheme`
interface TypographyVariantsOptions {
tab?: React.CSSProperties;
}
}
// Update the Typography's variant prop options
declare module '#mui/material/Typography' {
interface TypographyPropsVariantOverrides {
tab: true;
}
}
I am trying to customise my theme for material v5 and I would like to know how I can disable the black border that appears when I hover over the textfield component. This is what I have so far under my custom theme
MuiTextField: {
styleOverrides: {
root: {},
},
defaultProps: {
inputProps: {
style: {
fontSize: '11.8px',
// height: '.85rem',
},
},
},
},
Checkout the documentation at: https://mui.com/material-ui/react-text-field/#customization
import * as React from 'react';
import { alpha, styled } from '#mui/material/styles';
import TextField from '#mui/material/TextField';
const CssTextField = styled(TextField)({
'& label.Mui-focused': {
color: 'green',
},
'& .MuiInput-underline:after': {
borderBottomColor: 'green',
},
'& .MuiOutlinedInput-root': {
'& fieldset': {
borderColor: 'red',
},
'&:hover fieldset': {
borderColor: 'yellow',
},
'&.Mui-focused fieldset': {
borderColor: 'green',
},
},
});
export default function CustomizedInputs() {
return (
<CssTextField label="Custom CSS" id="custom-css-outlined-input" />
);
}
Change your styleOverrides like this:
MuiTextField: {
styleOverrides: {
root: {
"& .MuiOutlinedInput-root": {
"&:hover fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
"&.Mui-focused fieldset": {
borderColor: "rgba(0, 0, 0, 0.23)",
},
},
},
},
defaultProps: {
inputProps: {
style: {
fontSize: "11.8px",
// height: '.85rem',
},
},
},
},
I have a react setup in which I am using Tailwind and Material-UI. I have a component library in the Storybook which has MUI Theme in it to style the variants like button outline. I am trying to find a way of how can I use these two things to make the react app white-labeled. Basically, Which properties I can set in my theme that it can be directly applied to the components by the user/providers/companies. Currently, my theme looks something like this in the component library.
import { createTheme, ThemeOptions } from '#mui/material/styles';
import { Colours } from '../common';
export const MyThemeOptions: ThemeOptions = {
palette: {
primary: {
main: Colours.primary,
},
secondary: {
main: Colours.secondary,
},
error: {
main: Colours.error,
},
warning: {
main: Colours.warning,
},
info: {
main: Colours.info,
},
success: {
main: Colours.success,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '4px',
},
contained: {
padding: '4px 12px',
},
outlined: {
border: '1px solid #bdbdbd',
textTransform: 'none',
minWidth: 0,
color: '#212121',
},
outlinedSizeSmall: {
padding: '2px',
},
outlinedSizeMedium: {
padding: '6px',
},
outlinedSizeLarge: {
padding: '10px'
},
},
},
MuiButtonGroup: {
styleOverrides: {
grouped: {
minWidth: 0,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: '0 3px 7px 0 rgba(98, 125, 152, 0.16), 0 0 2px 0 rgba(36, 59, 83, 0.04)',
},
},
},
MuiToggleButton: {
styleOverrides: {
root: {
border: '1px solid #bdbdbd',
borderRadius: '4px',
textTransform: 'none',
color: '#212121',
minWidth: 0,
},
sizeSmall: {
padding: '2px',
},
sizeMedium: {
padding: '6px',
},
sizeLarge: {
padding: '10px',
}
}
}
},
};
const MyTheme = createTheme(MyThemeOptions);
export default MyTheme;
I am not able to find an article or tutorial or something which could lead me in a direction of how can I achieve the white labeling? If you know any knowledge asset in this direction, please share with me. Thank you!
The text inside my MaterialUI Stepper // StepLabel sometimes wraps over multiple lines.
I need to keep the vertical StepConnectors attached the StepIcons regardless of the number of lines of text in the label.
I've tried other solutions such as using CSS pseudo tags, but I hit a wall every time I try to work those changes into our existing solution.
Massive thanks in advance to anyone who can help.
Sandbox
https://codesandbox.io/s/practical-chebyshev-4hktl?file=/src/App.js
Current Screenshot
Existing ThemeOptions
import {
ThemeOptions,
createTheme,
ThemeProvider,
CssBaseline
} from "#material-ui/core";
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepper: {
root: {
backgroundColor: "transparent" // remove set background
}
},
MuiStepConnector: {
vertical: {
padding: 0,
width: 5,
marginLeft: 8 // half icon
},
lineVertical: {
top: "calc(-50%)",
bottom: "calc(50%)",
borderLeftWidth: "2px",
marginLeft: "-1px", // center (1/2 width)
marginTop: "-6px", // add -ve margin to top and bottom ...
marginBottom: "-6px", // ... to hide gap due to smaller icon
borderColor: "lightgrey",
"$active &, $completed &": {
borderLeftWidth: "4px",
marginLeft: "-2px",
borderColor: "blue"
}
}
},
MuiStepLabel: {
label: {
textAlign: "left",
fontSize: "1.25rem",
"&$active": {
fontWeight: 400
},
"&$completed": {
fontWeight: 400
}
},
iconContainer: {
paddingRight: 12
}
},
MuiStepIcon: {
root: {
display: "block",
fontSize: "1rem",
color: "lightgrey",
"&$completed": {
color: "blue"
},
"&$active": {
color: "blue"
}
}
}
}
};
Just in case anyone finds this in the future, we compromised on the implementation to deliver the task.
Instead of having a variable height on the MuiStepLabel, it was given a fixed height to keep the StepIcons the same distance apart. If you imagine the below screenshot with a different font size + spacing, it ended up looking OK, but not ideal.
Before
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-6px",
marginBottom: "-6px",
}
MuiStepLabel: {}
}
}
After
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-2px",
marginBottom: "-4px",
minHeight: "calc(24px + 0.5rem)",
},
MuiStepLabel: {
height: "1.25rem",
lineHeight: "1.25rem",
}
}
}
Sandbox
https://codesandbox.io/s/epic-bohr-0p7fj?file=/src/Theme/index.ts
I'm trying to style the TextField API provided by Material UI (found here), however, for some reason, the styling is not being applied to the component. When I render it on a webpage, it's shown as in its default form. I would greatly appreciate any help on this. Here is my code.
interface CustomEmptyFieldProps {
usernameOrPass: string,
}
const baseMuiOutlineInputSizeAndPosition = {
borderRadius: 8,
width: '328px',
height: '40px',
};
const baseTextFieldSizeAndPosition = () => (
{
"& label:not(.Mui-focused)": { // Label in center of TextInput
marginTop: '-8px',
},
"& label:.Mui-shrink": { // Label in center of TextInput
marginTop:'-8px',
},
width: '328px',
height: '40px'
}
);
const useTextFieldStyles = (isTypedIn: boolean) => (
makeStyles({
"& label.Mui-focused, label:not(.Mui-focused)": { color: TextFieldColours.error.label },
"& .MuiOutlinedInput-root": {
"& fieldset": { borderColor: TextFieldColours.error.border, },
"&:hover fieldset": { borderColor: TextFieldColours.error.border, },
"&.Mui-focused fieldset": { borderColor: TextFieldColours.error.border },
...baseMuiOutlineInputSizeAndPosition,
},
...baseTextFieldSizeAndPosition,
})
);
const EmptyTextField = (props: CustomEmptyFieldProps) => {
const {
usernameOrPass,
} = props;
const inputLabel = "VolunteerHub " + usernameOrPass;
const errorMessage = "Please enter your VolunteerHub " + usernameOrPass;
const textFieldStyles = useTextFieldStyles(false);
return (
<div>
<TextField
classes={{ root: textFieldStyles, }}
placeholder={inputLabel}
id="outlined-error-helper-text"
defaultValue=""
helperText={errorMessage}
variant="outlined"
/>
</div >
);
}
Not sure about the way you declare your useTextFieldStyles. Here is how I would usually do:
const useTextFieldStyles = makeStyles(() => ({
root: {
"& label.Mui-focused, label:not(.Mui-focused)": {
color: TextFieldColours.error.label
},
"& .MuiOutlinedInput-root": {
"& fieldset": { borderColor: TextFieldColours.error.border },
"&:hover fieldset": { borderColor: TextFieldColours.error.border },
"&.Mui-focused fieldset": {
borderColor: TextFieldColours.error.border
},
...baseMuiOutlineInputSizeAndPosition
},
...baseTextFieldSizeAndPosition
}
}));
Working sample: https://codesandbox.io/s/runtime-sky-x14vr?file=/src/App.tsx:647-1173