Styling MTableToolbar elements - reactjs

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.

Related

Make MUI Checkbox border color as gradient

I am writing styleOverrides to MuiCheckBox and want to make its borders as linear gradient. Any ideas how to make it possible?
MuiCheckbox: {
styleOverrides: {
root: {
color: 'linear-gradient(89.38deg, #957947 -13.88%, #E1BC6C 27.59%, #EFDB7C 66.54%, #E9BA6A 105.86%)',
backgroundColor: 'transparent',
}
}
You can add borderColor property to your root like this,
root:{
borderColor: 'linear-gradient()'
}
Something I use and I am converting our whole app to in order to do the migration from MUI 4 to 5, is component overrides.
So say you have a or component. Basically in like a styled.js file, you can do:
import { withStyles } from '#material-ui/core';
import { MenuItem } from '#material-ui/core';
const MenuItemStyled = withStyles((theme) => ({
root: {
borderColor: 'yourGradient'
}
})(MenuItem);
export { MenuItemStyled }
(in jsx file like 'index.js')
import MenuItemStyled from './styled';
import Menu from '#material-ui/core';
<Menu>
<MenuItemStyled value={blah}>blah</MenuItemStyled>
<MenuItemStyled value={blahblah}>blahblah</MenuItemStyled>
</Menu>
I find this gives you more root access to component styles without having to dig through specific classnames in the inspector. When overriding components like this is checks for your custom styles first before render and it just makes everything significantly easier. Plus in MUI 5 useStyles is depricated, so you'll want to do it this way regardless in order to keep your app current.

How to apply chakra-ui styles to custom components? (react-datepicker)

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.

styled-jsx - is it possible to define css rules without a class name and why dynamically resolved styles don't work?

I have the following code:
import React from 'react';
import MainTemplate from '../components/MainTemplate';
import { H1, Card } from '#blueprintjs/core';
import css from 'styled-jsx/css';
export default () => {
const { className, styles } = css.resolve`
{ color: red; }
`;
return (
<MainTemplate>
{styles}
<Card className={className}>
<H1>Some header text!</H1>
</Card>
</MainTemplate>
)
}
As you can see, I want to pass a className to an external Card component. However, I see in the dev tools, that there is a style element added to the head, but it seems as if it has text inside it, rather than styles, to wit, the syntax inside it isn't highlighted. In the result, the styles aren't applied.
So I wonder what do I wrong? I use a resolve tag as it's said in the documentation.
Also I wonder is it possible to define styles for element, without specifying a concrete tag name or class name?
I use next.js and styles aren't applied neither in dev nor in production mode.
It turned out that I just used an inappropriate css rule for testing - color is overridden by the styles of H1, so I didn't see the effect. If I use width or height it works well. So it was just my mistake.
As for the second question, it works well without a concrete tag or class. One even doesn't have to add parenthesis, to wit, the following code
const { className, styles } = css.resolve`height: 100%;`;
return (
<MainTemplate>
{styles}
<Card className={className}>
<H1>Плееры</H1>
</Card>
</MainTemplate>
)
works well too.

materialUI get class names without using withStyles

I have an app that renders components loaded dynamically from the database. I can render those components and everything works great, but I want to be able to apply specific styles to these components using withStyles.
Here's what I have tried, for sake of simplicity I'm modeling my database response with a JS file.
const dbResponse = {
__styles: {
myStyle: { background: 'blue' },
},
components: (styles) => ({
component: 'AppBar'
className: styles.myStyle,
}),
};
export default withStyles(dbResponse.__styles)(createComponentFromSchema(
dbResponse.components(dbResponse.__styles)
));
This will generate the AppBar component but not with the correct styles. The reason is obviously that what I need to pass to components is the Map that withStyles creates and passes to the children components. I could recursively clone the entire tree and replace the styles but I don't want to do that. I am using server side rendering and have access to all of the JSS specific pieces that are incidental to that scheme if it is helpful.

jss to override a material-ui nondeterministic class

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

Resources