I want to get rid of the Card on the background react-admin's List (v3.4.2). I get the desired effect if I define a string on the component property:
<List component={"some string"}/>
But this spams the console with an error:
And I don't want to have that error. On top of that, I think I shouldn't be changing the component property (I can't find it on the official docs).
The code should be the following: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/list/List.js
How should I do this? Is it possible to pass a style? Is there any component that works out of the box? Or should I just go custom?
You can hide the background using styling:
import { makeStyles } from '#material-ui/core/styles'
const useListStyles = makeStyles(theme => ({
content: {
boxShadow: 'none',
backgroundColor: 'inherit',
},
main: {
// backgroundColor: 'red',
},
root: {
// backgroundColor: 'red',
},
}))
const MyList = (props) => {
const classes = useListStyles()
return (
<List classes={classes} {...props} >
...
</List>
)
}
Related
I use React.cloneElement to override the default styles fr Text in react-native. Below is my implementation:
const React = require('react')
const { Platform, Text } = require('react-native')
const colorThemes = require('galarm-config').colorThemes
const defaultFontProperties = {
...Platform.select({
android: {
fontFamily: 'Roboto',
fontSize: 16
},
ios: { fontSize: 16 }
})
}
const oldRender = Text.render
if (oldRender) {
Text.render = function (...args) {
const origin = oldRender.call(this, ...args)
const colorScheme = origin.props.colorScheme
console.tron.log('text color scheme', colorScheme, origin.props.children)
return React.cloneElement(origin, {
style: [
defaultFontProperties,
{ color: colorThemes.getColorTheme(colorScheme).textColor },
origin.props.style
]
})
}
}
I have been using it successfully for quite some time. I recently updated to react-native 0.66 after which the below code stopped working. The issue is that the colorScheme prop is read as undefined on line 19.
Below is how the colorScheme is set
<Text colorScheme={'dark'}>
{'Some text'}
</Text>
I am not sure if something has changed in react 17.0.2 which causes the colorScheme prop to be not set. I have run it in debugger and of course the colorScheme prop is not set but I don't know how to debug this further.
Any help is appreciated.
Something should have changed in react/react-native internals that filters out custom props in the rendered node(origin). However, you can still access all the props you pass via the args since the first one corresponds to the props. You can do this instead
const props = args[0];
const colorScheme = props.colorScheme;
UPDATE
as for your second issue, try changing the order in the styles array to apply the overrides last
style: [
defaultFontProperties,
origin.props.style,
{ color: colorThemes.getColorTheme(colorScheme).textColor }
]
setting the color this way will force it even when you explicitly set the color when using the Text component, you may want to check if the style prop comes with a color and set that instead of the textColor from the theme
const propsStyle = props.style ? StyleSheet.flatten(props.style) : {};
...
{
color:
propsStyle.color || colorThemes.getColorTheme(colorScheme).textColor,
},
If, by colorScheme you mean (dark/light) mode, you can grab it directly from the appearance module:
import {Appearance } from 'react-native';
const theme = Appearance.getColorScheme();
so your code should work like this:
const React = require('react')
const { Platform, Text, Appearance } = require('react-native')
const colorThemes = require('galarm-config').colorThemes
const defaultFontProperties = {
...Platform.select({
android: {
fontFamily: 'Roboto',
fontSize: 16
},
ios: { fontSize: 16 }
})
}
const oldRender = Text.render
if (oldRender) {
Text.render = function (...args) {
const origin = oldRender.call(this, ...args)
const colorScheme = Appearance.getColorScheme(); // either 'light' or 'dark'
console.tron.log('text color scheme', colorScheme, origin.props.children)
return React.cloneElement(origin, {
style: [
defaultFontProperties,
{ color: colorThemes.getColorTheme(colorScheme).textColor },
origin.props.style
]
})
}
}
otherwise i don't know
Let's say I have a very simple props interface that specifics a boolean property. Now, in my useStyles, I want to change how that style is rendered based on both the conditional property AND a breakpoint. Here's a very simple example:
interface Props {
isError: boolean;
}
const useStyles = makeStyles<Theme, Props>(theme => ({
box: ({ isError}) => ({
backgroundColor: isError? 'red' : 'green',
[theme.breakpoints.up('md')]: {
backgroundColor: isError ? 'maroon' : 'teal',
}
}),
}));
When I'm under the md breakpoint, this works as expected; but as soon as I go over the md breakpoint, the color doesn't change. How come?
Here's a demo on StackBlitz that demonstrates the problem.
In working up the example for this question, I figured out the problem. The property value for creating styles based on a breakpoint, also needs to be a function:
const useStyles = makeStyles<Theme, Props>(theme => ({
box: (outerProps) => ({
backgroundColor: outerProps.isError ? 'red' : 'green',
[theme.breakpoints.up('md')]: (innerProps) => ({
backgroundColor: innerProps.isError ? 'maroon' : 'aqua',
}),
})
}));
Here's an updated StackBlitz showing the working example.
I have styles like this:
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
// here I want to target the 'container' className I created above like
'& .container': {
backgroundColor: 'green'
}
}
});
I want to target the container className I created inside of the active className. The above won't work because in the DOM, MUI will generate a unique name so I won't be targeting the right class. Wasn't able to find any SO answer or blog or documentation addressing this.
$ rulename is used for this purpose. Here is the documentation of it on Material-UI.
CSS in JS documentation also explains this feature.
container: {
//other styles
},
active: {
"& $container": {
background: "green",
color: "#fff"
}
}
Here one thing which is important that for referencing 'containerrule, it should be defined in the rules object. trying to use"& $containerwithout defining thecontainerrule inside themakeStyles` will not work.
Here is the working demo:
You can refer using $
You will have to modify your DOM little bit such that the active className is not the parent of container. Instead add the active className to the conatiner element itself.
so your css style might look like below
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red',
'&$active': {
backgroundColor: 'green'
}
},
});
I think this is what you are looking for $rulename
How to Use $ruleName to reference a local rule within the same style sheet
In your case i think the solution would be
const useStyles = makeStyles(theme => ({
root: {
margin: 5
},
container: {
backgroundColor: 'red'
},
active: {
.container: {
backgroundColor: 'green'
}
}
});
Which should compile to
.root.container.active{}
and on the target tag taking a example of button here
<Button
classes={{
root: classes.root,
container: classes.container,
active: classes.active,
}}>
Havent worked with MUI yet but even in vue or react the way this is achived is by setting a dynamic name on the tag that is targeted via script.
I was wondering if it was possible to have multiple connector colors with a different one at each step. So the first connector would be blue the one after that would be green then yellow then red all while keeping the previous color the same. The closest have gotten changes all previous colors to the same color. Is there a way to keep the previous the same color?
The Example I linked only has connectors of one color
Example of Stepper with Connector only one color
This answer shows how to change the color of individual StepIcons
Given that you have a function outside the component rendering the Stepper that returns an array containing the step labels and their corresponding icon color:
function getStepLabels() {
return [
{
label: "Select campaign settings",
color: "red"
},
{
label: "Create an ad group",
color: "blue"
},
{
label: "Create an ad",
color: "green"
}
];
}
you can generate classes for each label icon using material-ui's Hook API via the makeStyles function (if you are using a class component you might want to take a look at the withStyles function):
const useIconStyles = makeStyles(
(() => {
return getStepLabels().reduce((styles, step, index) => {
styles[index] = { color: `${step.color} !important` };
return styles;
}, {});
})()
);
and add the generated hook to your component: const iconClasses = useIconStyles();
When rendering the stepper you can make use of the generated classes like this:
[...]
<Step key={label} {...stepProps}>
<StepLabel
{...labelProps}
StepIconProps={{ classes: { root: iconClasses[index] } }}
>
{label}
</StepLabel>
</Step>
[...]
Here is a working example:
If you take a closer look at the render output of the Stepper component you will notice that StepLabel and StepConnector are sibling components. This means you can select a specific connector with the CSS :nth-child() pseudo-class. If you want to select the connector after the first step's label you would use the selector :nth-child(2). For the connector after second step's label it would be :nth-child(4).
If you have an array of step labels like this:
[
{
label: "First label",
connectorColor: "red"
},
{
label: "Second label",
connectorColor: "green"
},
{
label: "Third label"
}
];
you can pass this array to a material-ui style hook created by the makeStyles function and dynamically generate all the different CSS selectors necessary to style each connector:
const useConnectorStyles = makeStyles({
stepConnector: steps => {
const styles = {};
steps.forEach(({ connectorColor }, index) => {
if (index < steps.length - 1) {
styles[`&:nth-child(${2 * index + 2})`] = { color: connectorColor };
}
});
return styles;
},
stepConnectorLine: {
borderColor: "currentColor"
}
});
Now use the generated style hook in your component: const connectorClasses = useConnectorStyles(stepLabels); and provide the connector prop to the Stepper component:
connector={
<StepConnector
classes={{
root: connectorClasses.stepConnector,
line: connectorClasses.stepConnectorLine
}}
/>
}
Here is a working example:
I have a form with a very awkward background color. Would like to change the color of the helper text of the Outlined TextField when it is in an error state but can't seem to override it. It persists the red.
See CodeSandBox .
For some reason, the error text color is generated under the following className: .MuiFormHelperText-root.Mui-error
So overriding error rule alone is not enough.
This will do the trick:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
color:'black',
},
error: {
"&.MuiFormHelperText-root.Mui-error" :{
color: theme.palette.common.white,
},
},
}));
Code Sandbox
The problem is caused by CSS specificity (the base style has more specific classname, i.e. MuiFormHelperText-root.Mui-error than the overriding style class). It's recommended to use &$ syntax under this circumstance:
const helperTextStyles = makeStyles(theme => ({
root: {
margin: 4,
'&$error': {
color: 'white'
}
},
error: {} //<--this is required to make it work
}));
You can also refer to this section for an example and a bit more explanation.
It would be better to customize your Mui Theme as follows:
const Theme = {
components: {
MuiFormHelperText: {
styleOverrides: {
root: {
color: "red"
}
}
}
}
};
See https://mui.com/material-ui/customization/theming/ for more information.
i found one solution to change the color of text field.
<TextField
error
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled"
/>
here you can see error which is Boolean, so you might be having validation like YUP, if you do then you pass it like this.
<TextField
error={!valid}
id="filled-error-helper-text"
label="Error"
defaultValue="Hello World"
helperText="Incorrect entry."
variant="filled" />
here i am changing color base on valid keyword.