I have a simple React JS component that wraps around the really cool react ChartistGraph component. The only issue is that the styling is seemingly overridden by the ChartistGraph default CSS. There is a lot of info on the regular Chartist js package but not much on the React JS package.
As you can see, I'm trying to change the fill color two ways: through style classes and through a prop that supported on the component.
import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';
const styles = theme => ({
graphStyle: {
fill: 'red',
},
});
const CustomChart = ({ classes, graph }) => {
return (
<Paper>
<ChartistGraph
className={classes.graphStyle}
data={graph.data}
options={graph.options}
type={graph.type}
style={{ fill: 'red' }}
/>
</Paper>
);
};
export default withStyles(styles)(CustomChart);
A picture of the styles of the chart
You can use jss's nested rules (included by default in material-ui):
const styles = theme => ({
graphStyle: {
'& .ct-label': { fill: 'red' },
},
});
Full code:
import React from 'react';
import { Paper, withStyles } from 'material-ui';
import ChartistGraph from 'react-chartist';
const styles = theme => ({
graphStyle: {
'& .ct-label': { fill: 'red' },
},
});
const CustomChart = ({ classes, graph }) => {
return (
<Paper>
<ChartistGraph
className={classes.graphStyle}
data={graph.data}
options={graph.options}
type={graph.type}
// style={{ fill: 'red' }} // omitted
/>
</Paper>
);
};
export default withStyles(styles)(CustomChart);
I got into similar issue recently.React-Chartist is built on top of react not material-ui.When you inspect,you found regular css class names,not "material ui-ish" class-names(like MuiTable-root,MuiTable-selectedRow,etc).So ,imho,it won't support material-ui methods (withStyle/makeStyle) and rules.
But what you can do is:-
create a css file and put your styles there
And import it where you want
.You can import it on the main file of your app(index.js or whatever it is) since every css in your app will bundle in one file.
Related
I'm trying to use the exact style of React Native Kitten UI Auto Complete with Theme(light and dark) capability in the React Native Google Places Auto Complete
Have tried a few things like custom style in <GooglePlacesAutoComplete style={-CUSTOM-STYLE-}, but I believe there would be a lot of customization to be done.
Do we know of any better way to handle this?
Got a little closer to where I wanted. Still not able to style based on onFocus. But anything is better than nothing.
Will keep updating this answer.
import React, { useEffect, useRef } from 'react';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { Text, useTheme } from '#ui-kitten/components';
import { withStyles } from '#ui-kitten/components';
const GooglePlacesInput = () => {
const ref = useRef();
const theme = useTheme();
useEffect(() => {
ref.current?.setAddressText('');
}, []);
return (
<>
<Text category='label' appearance='hint'>Place</Text>
<GooglePlacesAutocomplete
ref={ref}
placeholder='Search'
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details);
}}
query={{
key: 'YOUR_API_KEY',
language: 'en',
}}
styles={{
poweredContainer:{display:'none'},
textInput:{
color:theme['text-basic-color'],
backgroundColor:theme['background-basic-color-2'],
borderColor: theme['border-basic-color-4'],
borderWidth:1,
height:40,
marginTop:5
}
}}
/>
</>
);
};
export default withStyles(GooglePlacesInput);
Background
So I want to style my component and all its children with a text highlight color to be yellow for example. But I am only able to do it if the component returns the text wrapped within the element itself, and won't work with any text wrapped in its child elements or child components.
For instance, this will change the highlight color:
import React from "react";
import { Container, styled } from "#mui/material";
const StyledContainer = styled(Container)(({ theme }) => ({
"::selection": {
backgroundColor: "#ffe20b"
},
}));
function App() {
return <StyledContainer>hello world</StyledContainer>;
}
export default App;
But if I wrap the text in a child element div the styling won't work.
import React from "react";
import { Container, styled } from "#mui/material";
const StyledContainer = styled(Container)(({ theme }) => ({
"::selection": {
backgroundColor: "#ffe20b"
},
}));
function App() {
return <StyledContainer><div>hello world</div></StyledContainer>;
}
export default App;
Question
How would I be able to recursively set the style throughout my App? Let's say my most-outter element is a <Box></Box> and it has a class named MuiBox-root that we can use.
I have tried the following but none worked:
// didn't work
const StyledContainer = styled(Container)(({ theme }) => ({
margin: theme.spacing(0),
".MuiBox-root::selection": {
backgroundColor: "#ffe20b"
},
// the following didn't work either
const StyledContainer = styled(Container)(({ theme }) => ({
margin: theme.spacing(0),
".MuiBox-root > * ::selection": {
backgroundColor: "#ffe20b"
},
If you highlight the displayed two lines of text, you can see that the first line is styled while the second line isn't. Here is the codesandbox
link
You can try following it will work for all child elements
const StyledBox = styled(Box)(({ theme }) => ({
"::selection, *::selection": {
backgroundColor: "#ffe20b"
}
}));
can somebody explain how pass in the defauklt theme in Material UI5
in Material UI6 i use to do it like this
const useStyles = makeStyles((theme) => ({
home: {
display: "flex",
paddingTop: "8rem",
width: "100vw",
height: "100vh",
backgroundColor: theme.palette.primary.dark,
color: "white",
},
}));
but as i got throught M-UI5 docs (as far as i found) there is no explanation on how it can be done , the only part they mention about makeStyle it contains this code in this page docs
+import { makeStyles } from '#mui/styles';
+import { createTheme, ThemeProvider } from '#mui/material/styles';
+const theme = createTheme();
const useStyles = makeStyles((theme) => ({
background: theme.palette.primary.main,
}));
function Component() {
const classes = useStyles();
return <div className={classes.root} />
}
// In the root of your app
function App(props) {
- return <Component />;
+ return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
}
so am i suppose to run createTheme() on every component to get the theme? , apology if i missed out an obvious thing in the docs , probably coz my poor english
The part you are missing is from this part of the migration guide: https://mui.com/material-ui/guides/migration-v4/#style-library.
if you are using JSS style overrides for your components (for example overrides created by makeStyles), you will need to take care of the CSS injection order. To do so, you need to have the StyledEngineProvider with the injectFirst option at the top of your component tree.
Without this, the default styles for the MUI Card in your About component win over the styles specified via classes.about where the styles overlap (e.g. background).
Changing your AllProviders component to the following (just adding <StyledEngineProvider injectFirst>) fixes it:
import React from "react";
import CountriesProvider from "./countries-context";
import QuestionsProvider from "./questions-context";
import {
ThemeProvider,
createTheme,
StyledEngineProvider
} from "#mui/material/styles";
const theme = createTheme();
const AllProviders = (props) => {
return (
<StyledEngineProvider injectFirst>
<QuestionsProvider>
<ThemeProvider theme={theme}>
<CountriesProvider>{props.children}</CountriesProvider>
</ThemeProvider>
</QuestionsProvider>
</StyledEngineProvider>
);
};
export default AllProviders;
https://codesandbox.io/s/funny-flower-w9dzen?file=/src/store/AllProviders.js:303-342
The theme was being passed in fine without this change (otherwise you would have had errors when it tried to access parts of the theme), but the CSS injection order was not correct.
Using MUI V5, how can I pass a custom style to a button component? Here is what I have been trying to merge the old way with the new MUI v5 but it's not working.
import { Button } from "#mui/material";
import { styled } from "#mui/material/styles";
import React from "react";
const StyledButton = styled(Button)(({ theme }) => ({
root: {
minWidth: 0,
margin: theme.spacing(0.5),
},
secondary: {
backgroundColor: theme.palette.secondary.light,
"& .MuiButton-label": {
color: theme.palette.secondary.main,
},
},
primary: {
backgroundColor: theme.palette.primary.light,
"& .MuiButton-label": {
color: theme.palette.primary.main,
},
},
}));
export default function ActionButton(props) {
const { color, children, onClick } = props;
return (
<Button
className={`${StyledButton["root"]} ${StyledButton[color]}`}
onClick={onClick}
>
{children}
</Button>
);
}
Now I would like to call this Button and give it color="secondary"
import ActionButton from "./ActionButton";
import { Close } from "#mui/icons-material";
export default function Header() {
return (
<ActionButton color="secondary">
<Close />
</ActionButton>
)
}
It looks like your code was an attempt to migrate from code using makeStyles/useStyles, but styled works quite a bit differently. You can't use it to generate multiple CSS classes like makeStyles does (StyledButton["root"] and StyledButton[color] will be undefined). styled will generate a single CSS class that is then passed in the className prop to the wrapped component (e.g. Button). Instead of trying to create multiple CSS classes with logic to decide which class to apply, with styled you can leverage props (e.g. the color prop) to generate dynamic styles within the single CSS class that is generated.
Below is an example that I think achieves the effect your code was aiming for. My example doesn't do anything with MuiButton-label because that class doesn't exist in v5 (and the <span> that the class was applied to inside the <button in v4 also does not exist), and I believe the default Button styles set color as desired when the color prop is allowed to passed through to Button.
import Button from "#mui/material/Button";
import { styled } from "#mui/material/styles";
const StyledButton = styled(Button)(({ theme, color }) => ({
minWidth: 0,
margin: theme.spacing(0.5),
backgroundColor: color ? theme.palette[color].light : undefined
}));
export default StyledButton;
I have a page made up of many sub-components. The page folder holds the page file, external styles file and each sub-components folders - which also consists of their own style.
I'm not sure how to set up an external shared common style file for all sub-components along with external styles for each of the sub-components.
Ie. DemoStyles.js is the common styles and Demo.js is where are the sub-components are called.
Demo.js:
import React from "react";
import PropTypes from "prop-types";
import { withStyles } from "#material-ui/core/styles";
import styles from "./DemoStyles";
import Red from "./red/Red";
import Blue from "./blue/Blue";
function SharedStyles(props) {
return (
<React.Fragment>
<Red />
<Blue />
</React.Fragment>
);
}
SharedStyles.propTypes = {
classes: PropTypes.object.isRequired
};
export default withStyles(styles)(SharedStyles);
DemoStyles.js:
export default theme => ({
title: {
color: "white",
fontSize: 30
}
});
The title style is not being applied.
The className is set in the Red.js file:
TL;DR:
I need one common external style file to apply to all subcomponents living in one folder; and each subcomponent needs their own external style specific to it.
Here is the code sample: https://codesandbox.io/s/rypoqk07lo
SOLVED:
I solved this by importing the demoStyles into the RedStyles.js file and then calling it with the spread operator and passing theme as an argument like so:
RedStyles.js
import demoStyles from "../DemoStyles";
export default theme => ({
...demoStyles(theme),
red: {
backgroundColor: "red"
}
});
code sample updated as well
You forgot to pass the classes props on Demo.js to your components like you do on <Red /> and <Blue />.
const { classes } = props;
return (
<React.Fragment>
<Red classes={classes} />
<Blue classes={classes} />
</React.Fragment>
);
Its good to remember that Material-UI has themes support. It's better to use it on Demo.js depending of what you trying to do.