I'm trying to create a custom style for material textField and need a JSS selector that reaches a nondeterministic classname.
Style would look something like this:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
top: 2,
'&.MuiInputLabel-shrink':{
top: -2,
}
}
}
The issue is MuiInputLabel-shrink is also generated by jss and has a xxx number suffix. Is there any selector that work on generated classes?
Material-ui have a built in API where you can override mostly of the styling.
Assuming you are using material-ui in react, you can override shrink in the classes property in InputLabel component.
<InputLabel
classes={{
shrink: classes.shrinkStyle
}}
/>
Read the documentation to find the right component to override. There is also attached code to help you on the way. https://codesandbox.io/embed/l32qn5p18q
Link to similar problem in GitHub: https://github.com/mui-org/material-ui/issues/10468
Now then back to style through JSS
There is some possibilites to style with JSS through nesting. I've not researched huge lot on this, but I know that you can use nested JSS. Example:
const styles = {
'#media (min-width: 768px)': {
borderLabel: {
//styling
'&>div':{
//styling
}
'&>div>div>td':{
'& svg':{
//styling
}
}
}
}
}
You should also read JSS documentation
Related
I have a React mui theme with a custom scrollbar like this:
ui.material.createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
'::-webkit-scrollbar': {
width: '100px'
}
}
}
}
});
Then I use a Dialog. This adds padding-right and overflow to the body:
At this point padding-right: 19px is incorrect. It should be 100px. What is the appropriate location to override these styles in mui? I'm aware I can add a CSS override for this situation but I'd like to solve in the proper, supported way, that mui probably provides somehow.
I'd like to define styles for my Datepicker component through the Chakra-ui styles.
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { chakra } from '#chakra-ui/react';
const StyledDatepicker = chakra(DatePicker);
I've used the chakra factory function to be able to give the StyledDatepicker some styles through props, as shown in the code above, but I'd like to define everything in a separate styles .ts file like I've done for the built-in chakra components.
I've made a Datepicker.ts file with some style definitions and added it to the overrides object which is exported here as styles:
const styles = extendTheme(overrides);
export { styles };
which is imported in App.tsx and assigned to the theme prop of my ChakraProvider.
I've made some custom components which was fine, though not exactly what I'm looking for, and I'm looking to change the styles of the header container, the element with classname react-datepicker__header - no examples of making a custom component for this on react-datepicker website. I know I can do it with CSS files, but I'd really like to do all of it in the styles file for consistency.
The answer turned out to be fairly straightforward, but imo, chakra could have made it a bit easier to learn about this possibility.
To target a css class, you just add the classname into your styles object like this:
const DatepickerStyles = {
baseStyle: {
color: 'black',
'.react-datepicker__header': {
background: 'white',
},
},
};
Then do something like this where you want to use the component (In my case, the datepicker, but this will work for any component):
function MyDatePickerComponent(props) {
const datepickerStyles = useStyleConfig('Datepicker');
return (
<Datepicker
__css={datepickerStyles}
//some required props omitted for simplicity
/>
);
}
You can use sx instead of __css, I use __css for readability.
For react-datepicker and my case of styling the header specifically, I had to use a custom calendarContainer component, where I also applied the style in a similar manner by using useMultiStyleConfig instead of useStyleConfig. Hope this can be of help to someone.
I'm trying to style my MaterialTable component. Some of the components are easy to do so because you can override the styles with createMuiTheme(). What I really have are two components, MuiFormControl and MTableToolbar, and I want to put them inline.
I did sucessfully with MuiFormControl:
const getMuiTheme = () =>
createMuiTheme({
overrides: {
MuiFormControl: {
root: {
display: 'inline-block'
}
}
}
});
However I am unable to do the same with MTableToolbar component. The class name that actually shows up is named "MTableToolbar-actions-36" so I actually want to change an action section the MTableToolbar. The components looks like this (and MTableToolbar it's the icons section):
I don't want to create a css rule for "MTableToolbar-actions-36" as there might be a way to do this without a css rule.
I know we can edit the theme of material UI but I was thinking on making it dynamic, where in we can have SASS Variables set, and it will automatically update the Material UI theme.
I use sass to design my page, and here's the sample of variables I use:
$primary-color: #1E79C7;
$secondary-color: #E5681A;
Currrently for me I do the following for the material ui button, because i want my design to be on one place as much as possible
.app-button-blue {
background-color: $primary-color !important;
margin: 5px;
}
.app-button-gray {
background: transparent !important;
box-shadow: none !important;
}
.app-button-white {
background: transparent !important;
box-shadow: none !important;
border: $primary-color solid 1px !important;
}
Is there a way for me to use this SASS variables on overwriting the theme of material ui - like setting the primary and secondary colors?
Material UI uses a javascript based style solution (JSS) instead of a CSS pre-processor like SCSS (see style solution).
This means its not possible to customize the Material UI theme via SCSS variables. Nor is it possible to access the theme in your CSS/SCSS styles.
If you want to use SCSS for styling/theming, you might consider Material Web Components instead.
It is possible to populate the MaterialUI theme from Sass/Scss variables using Webpack wizadry
palette.scss
$primary: #1E79C7;
$secondary: #E5681A;
:export {
primary: $primary;
secondary: $secondary;
}
theme.js
import { createMuiTheme } from '#material-ui/core/styles'
import palette from './palette.scss'
export const theme = createMuiTheme({
palette: {
primary: {
main: palette.primary,
},
secondary: {
main: palette.secondary,
},
}
})
App.js
import React from 'react'
import { ThemeProvider } from '#material-ui/core/styles'
import { theme } from './theme'
export const App = () => {
return (
<ThemeProvider theme={theme}>
// App
</ThemeProvider>
)
}
This means you can use Sass to style and color both your non Material UI and Material UI components from one source of truth
To style other components, just use Sass imports
#import './palette.scss'
.app-button-blue {
background-color: $primary; // removed !important cos there's usually a better way
margin: 5px;
}
An example on this GitHub issue suggests how you can do this.
import React from 'react';
import { withStyles } from '#material-ui/core';
const cssVariables = (theme) => ({
'#global': {
':root': {
'--color-primary': theme.palette.primary.main,
'--color-secondary': theme.palette.secondary.main,
}
}
});
const RootComponent = () => {
return <div>Whatever...</div>
}
export default withStyles(cssVariables, RootComponent);
Having in mind RootComponent initialises inside ThemeProvider.
There's a way to define the theme variables in the JS-side and use them in the CSS-side to keep a single source of truth and allow dynamic theme switching. You can check the solution I posted on the MUI GitHub repository.
It may not be exactly what you wanted to achieve, but the following article explains how you can export SASS variables. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript
Afterwards you can import these in JS and use them to set up your theme.
Initialize your variables in the <body> tag styles.
body {
--my-var: #fff;
}
Then it will be visible for Material UI Drawers and other components, that opening with portals.
UPD 2:
There is another way to do the thing above dynamically. So, if you want to use CSS Variables to change Material UI components styles, for example - for Drawer (that uses React-Portals to lift up a component to top level of the DOM). The problem was that by MUI lifted up components were out of the 'root' div and CSS Variables could not reach these components.
Solution:
const [theme, setTheme] = useState('light');
useEffect(() => {
document.body.classList.remove('dark', 'light');
document.body.classList.add(theme);
}, [theme]);
and add variables to these classNames in some file.
File theme.scss:
.light {
--theme-color: #A80000;
--theme-page-background: #FFF;
$theme-page-background: #FFF;
--theme-page-text: $color-text;
}
.dark {
--theme-color: #0000A8;
--theme-page-background: #111;
$theme-page-background: #111;
--theme-page-text: #FFF;
}
Import your theme.scss file to the project and it have to work.
I wanna custom the floating Label of TextField.
I know creating a new one works like below, but is there a better way?
import TextFiled from 'material-ui/TextField';
class TextFiledNew extends Component {
static propTypes = {
}
render () {
return (
<TextFiled
floatingLabelFixed={true}
floatingLabelStyle = {{top: '88px', textTransform: 'uppercase', letterSpacing: '0.1em'}}
/>
)
}
}
module.exports = TextFiledNew
I tried the changing Theme way, but it doesn't work.
const muiTheme = getMuiTheme({
textField: {
floatingLabel:{
top: '88px',
textTransform: 'uppercase',
letterSpacing: '0.1'
}
}
});
That works just fine! We use several components with a custom wrapper around them from material-ui. Our EnhancedMenuItem lets us add some optional icons and transitions in some circumstances. Definitely experiment with the library and make your own modifications to get it exactly right for your needs.