I'm recently working on a project using react. I would like to know if there is a way to color the Material-UI component of the rating with custom colors.
Actually, you can have whatever icon shape or colour that you like
Take a look at this example from Material UI site:
You can use this example
material-ui.com/components/rating/customize
and create a costm component in your preferred color
smt like this
const StyledRating = withStyles({
iconFilled: {
color: 'red',
},
iconHover: {
color: 'darkred',
},
})(Rating);
Related
I have the following code for React Button story :
export const Default = Template.bind({});
Default.args = {
label: 'Default button',
style: {
border: '2px solid #16213E',
background: '#16213E',
},
};
I want to make control option to change these colors using the color picker option in story book, but can't find a way.
I checked the storybook example file they making a prop for the backgroundColor directly. I was hoping to find a solution to make it work with my code without adding css props outside style props.
Also open to new idea to refactor code if it's possible.
I am using MUI v5 together with Quill in React.
I can pass a className prop to the ReactQuill component and change it's styling:
const useStyles = makeStyles((theme) => ({
editor: {
'& .ql-editor': {
border: 'none',
// and so on...
}
}
}))
<ReactQuill className={classes.editor} ... />
Now with MUIv5 and its migration to emotion, this is not possible anymore. My workaround currently is to wrap the ReactQuill element inside a div like so:
const ReactQuillContainer = styled('div')(({theme}) => ({
'& .ql-editor': {
border: 'none',
// and so on...
}
}))
<ReactQuillContainer>
<ReactQuill ... />
</ReactQuillContainer>
But this changes the underlying DOM structure.
Is there a way to achieve the old result in the new way? I know about the css function, however I need the theme for styling and I don't think that is possible.
I also don't want to inline all those styles.
Have you solved this yet? I'm facing a similar issue, where I'd like to programmatically set MUI TextField styling on a Quill editor.
If not, have you tried passing Quill itself to styled? This works for me, though it doesn't solve my core problem. I'm also not sure it will allow you to set styles on child classes, but that may not be an issue.
const StyledQuill = styled(ReactQuill)(({ theme }) => ({
color: theme.palette.warning.main,
// and so on...
}));
I am using a functional component with React, I need to show SVG Icon based on state and I want to load the relevant icon
so the parent will show only call :
<icon classes:... , state..></icon>
1- how can I pass style and if it does not exist and use a default style in the child?
now I have smth like in the parent :
... createStyle
IconSuccess: {
fontSize: 20,
width: 20,
},
IconWarning: {
fontSize: 20,
width: 20,
},
but i want smth like :
icon:{
width:..
font ..
warning: { color}
success: { color}
}
then
<IconChild state={state} classes={{ icon: itemStyle.icon}} />
this is work only if I pass specific style like:
<IconChild state={state} classes={{ iconWarning: itemStyle.iconWarning}} />
then in the childCOmponent I am doing smth like:
const classes = useStyles(props);
if( props.state == 1){
return <className={`${classes.iconWarning}`} />
}
else{
return <className={`${classes.iconSuccess}`} />
}
so basically I am trying to understand how to create a really generic component that I can use and pass and that need a state to choose the specific icon and also from specific class
do I need HOC ? or different approach
As I understand, you want to:
Reuse some common properties like width and fontSize.
Custom render other properties like color.
Then this is my approach:
First, make new style for commonly used properties.
Secondly, create new styles for conditional use of each state.
Last, use something like classnames to combine all classes.
So the main idea here is: instead of using one class for each item, now using two classes for each one. That's it!
const useStyles = withStyles({
commonProperty: {
fontSize: '20px',
width: '20px',
},
successOnlyProperty: {
color: 'green'
},
warningOnlyProperty: {
color: 'orange'
},
});
In the Material UI documents, they provided sample code to show how one can change the color of a Radiobutton.
const GreenRadio = withStyles({
root: {
color: green[400],
'&$checked': {
color: green[600],
},
},
checked: {},
})(props => <Radio color="default" {...props} />);
I would like to replicate this with styled-component instead i.e. const StyledRadio = styled(Radio) but I am not too familiar with the syntax such as the ampersand and the dollar sign - how can I do this?
When using styled components with MUI, the CSS is applied to the root class of the component. If you need to apply a more specific style, then you'll need to target the relevant class. In this case, you'll need to target the .Mui-checked class:
const StyledRadio = styled(Radio)`
color: ${green[400]};
&.Mui-checked {
color: ${green[600]};
}
`;
The MUI docs are really good in that they list the CSS classnames for each component. If you visit the API docs for the Radio component, you'll see the .Mui-checked class listed there (under the 'Global Styles' column).
Here's a working example in Code Sandbox: https://codesandbox.io/embed/styled-components-9pewl
Here's the appropriate styled-components syntax:
const GreenRadio = styled(Radio)`
color: ${green[400]};
&.Mui-checked {
color: ${green[600]};
}
`;
Related documentation: https://material-ui.com/customization/components/#pseudo-classes
We are developing modern webparts for O365 Communication Sites using Office UI Fabric React. I want to use the new ts-based approach to styling my components(see here). Everything works quite well, except that it's not using the current theme of the SharePoint site it's deployed to.
My webpart was created using standard Yeoman scaffolding for SharePoint webparts (selecting React as the framework).
My styling code looks like this:
import { getTheme, FontWeights, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
export interface IComponentClassNames {
locationBanner: string;
locationLabel: string;
locationValue: string;
editLocationButton: string;
findLocationButton: string;
}
const theme = getTheme();
export const getClassNames = (): IComponentClassNames => {
return mergeStyleSets({
locationBanner: {
display: 'inline-flex',
paddingLeft: '8px',
},
locationLabel: [
theme.fonts.large,
{
color: theme.palette.neutralPrimary
}
],
locationValue: {
color: theme.palette.themeDark
},
editLocationButton: {
paddingLeft: '20px'
},
findLocationButton: {
paddingLeft: '10px'
}
});
};
And then in the render part of my component I do the following:
const {locationBanner, editLocationButton, findLocationButton, locationLabel, locationValue} = getClassNames();
And then apply that in the className-attributes. This works fine and the style is applied - however: getTheme() returns the default theme (i.e. mainly blue), not what is currently set on the SharePoint site. Do I somehow have to pass the theme down to my component (from the webpart ts) or how should this work?
My solution was to pull the theme from the window object, build a theme object, and pass it around to the components as needed
Like this:
Build the theme at the root ts file
const ThemeColorsFromWindow: any = (window as any).__themeState__.theme;
const siteTheme: ITheme = createTheme({ //pass this object to your components
palette: ThemeColorsFromWindow
});
Then I passed the theme to my components where needed.
<MyButton
ButtonText={this.props.itemButtonText}
ButtonType={'dark'}
ButtonURL={this.props.itemButtonURL}
siteTheme={siteTheme} //site theme is passed to component
/>
Build my CSS-in-JS object
const siteTheme: IReadonlyTheme = this.props.siteTheme; //shortening the path a little
ButtonStyles: IButtonStyles = { //the interface here varies by component
root:{
backgroundColor: siteTheme.palette.themeTertiary, //get theme colors like this
},
label:{
color: siteTheme.palette.white,
},
rootHovered:{
backgroundColor: siteTheme.palette.themePrimary,
},
labelHovered:{
color: siteTheme.palette.white
}
};
Then I set the styles prop of the component
<PrimaryButton
styles={ButtonStyles} //pass the styles to the component here
onClick={() => GoToPage(this.props.ButtonURL)}
text={this.props.ButtonText ? this.props.ButtonText : 'BUTTON TEXT'}
/>
If you want to adjust to variants, or section backgrounds, check this blog post. https://learn.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/supporting-section-backgrounds
Which uses the ThemeProvider service.
It seems to me like you are using the office-ui-fabric-react library. The getTheme method you import comes from there. I can't see how office-ui-fabric-react queries SharePoint for the current theme. It may be tracking its own. I would try getting the theme through the SharePoint component libraries. https://learn.microsoft.com/en-us/javascript/api/sp-component-base/themeprovider