i need to alternating the background color of react-data-table-component
this my style
const customStyles = {
rows: {
style: {
border: 'none', // override the row height
backgroundColor: ["#FFDDDD", "#FFF4F4"],// this the color
borderRadius:8,
marginTop:8
}
},
headCells: {
style: {
backgroundColor: "#FFF4F4",
border: 'none',
borderRadius:8,
},
},
cells: {
style: {
paddingLeft: '8px', // override the cell padding for data cells
paddingRight: '8px',
border: 'none'
},
},
};
how can this style work to my react-data-table-component
Related
I want to overwrite a specific style for multiple components. For now it works for all components, but not the the Select.
What I'm doing is:
MuiSelect: {
styleOverrides: {
select: {
background: themePalette.palette.background.paper,
marginLeft: '0rem',
borderRadius: '10rem',
},
iconOutlined: {
background: themePalette.palette.background.default,
color: themePalette.palette.primary.main,
borderRadius: '10rem',
},
},
variants: [
{
props: { size: 'small' },
style: {
borderRadius: '0.4rem',
select: {
borderRadius: '0.4rem',
},
iconOutlined: {
borderRadius: '0.4rem',
},
},
},
],
},
The style in the "styleOverrides" section get overwritten like expected. But the variant never is applied.
For other elements like TextField, ToggleButtonGroups, etc. it works. But somehow it does not work for the Select.
Also when I directly overwrite the same properties in the Select control via the sx prop, it's not applied.
sx={{
input: {
borderRadius: '0.4rem',
},
select: {
borderRadius: '0.4rem',
backgroundColor: theme.palette.grey[300],
},
borderRadius: '0.4rem !important',
}}
Here I also don't have any effect. The border radius is still unchanged at '10rem' like it's defined in the stylesOverrides.
Is this a bug, or am I doing something wrong for the Select?
style in theme props and sx work with css selectors. Not with pre-defined slots like styleOverrides
sx={{
'& .MuiSelect-select': {
...styles here,
...
}
}}
I have a react setup in which I am using Tailwind and Material-UI. I have a component library in the Storybook which has MUI Theme in it to style the variants like button outline. I am trying to find a way of how can I use these two things to make the react app white-labeled. Basically, Which properties I can set in my theme that it can be directly applied to the components by the user/providers/companies. Currently, my theme looks something like this in the component library.
import { createTheme, ThemeOptions } from '#mui/material/styles';
import { Colours } from '../common';
export const MyThemeOptions: ThemeOptions = {
palette: {
primary: {
main: Colours.primary,
},
secondary: {
main: Colours.secondary,
},
error: {
main: Colours.error,
},
warning: {
main: Colours.warning,
},
info: {
main: Colours.info,
},
success: {
main: Colours.success,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
borderRadius: '4px',
},
contained: {
padding: '4px 12px',
},
outlined: {
border: '1px solid #bdbdbd',
textTransform: 'none',
minWidth: 0,
color: '#212121',
},
outlinedSizeSmall: {
padding: '2px',
},
outlinedSizeMedium: {
padding: '6px',
},
outlinedSizeLarge: {
padding: '10px'
},
},
},
MuiButtonGroup: {
styleOverrides: {
grouped: {
minWidth: 0,
},
},
},
MuiCard: {
styleOverrides: {
root: {
boxShadow: '0 3px 7px 0 rgba(98, 125, 152, 0.16), 0 0 2px 0 rgba(36, 59, 83, 0.04)',
},
},
},
MuiToggleButton: {
styleOverrides: {
root: {
border: '1px solid #bdbdbd',
borderRadius: '4px',
textTransform: 'none',
color: '#212121',
minWidth: 0,
},
sizeSmall: {
padding: '2px',
},
sizeMedium: {
padding: '6px',
},
sizeLarge: {
padding: '10px',
}
}
}
},
};
const MyTheme = createTheme(MyThemeOptions);
export default MyTheme;
I am not able to find an article or tutorial or something which could lead me in a direction of how can I achieve the white labeling? If you know any knowledge asset in this direction, please share with me. Thank you!
The text inside my MaterialUI Stepper // StepLabel sometimes wraps over multiple lines.
I need to keep the vertical StepConnectors attached the StepIcons regardless of the number of lines of text in the label.
I've tried other solutions such as using CSS pseudo tags, but I hit a wall every time I try to work those changes into our existing solution.
Massive thanks in advance to anyone who can help.
Sandbox
https://codesandbox.io/s/practical-chebyshev-4hktl?file=/src/App.js
Current Screenshot
Existing ThemeOptions
import {
ThemeOptions,
createTheme,
ThemeProvider,
CssBaseline
} from "#material-ui/core";
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepper: {
root: {
backgroundColor: "transparent" // remove set background
}
},
MuiStepConnector: {
vertical: {
padding: 0,
width: 5,
marginLeft: 8 // half icon
},
lineVertical: {
top: "calc(-50%)",
bottom: "calc(50%)",
borderLeftWidth: "2px",
marginLeft: "-1px", // center (1/2 width)
marginTop: "-6px", // add -ve margin to top and bottom ...
marginBottom: "-6px", // ... to hide gap due to smaller icon
borderColor: "lightgrey",
"$active &, $completed &": {
borderLeftWidth: "4px",
marginLeft: "-2px",
borderColor: "blue"
}
}
},
MuiStepLabel: {
label: {
textAlign: "left",
fontSize: "1.25rem",
"&$active": {
fontWeight: 400
},
"&$completed": {
fontWeight: 400
}
},
iconContainer: {
paddingRight: 12
}
},
MuiStepIcon: {
root: {
display: "block",
fontSize: "1rem",
color: "lightgrey",
"&$completed": {
color: "blue"
},
"&$active": {
color: "blue"
}
}
}
}
};
Just in case anyone finds this in the future, we compromised on the implementation to deliver the task.
Instead of having a variable height on the MuiStepLabel, it was given a fixed height to keep the StepIcons the same distance apart. If you imagine the below screenshot with a different font size + spacing, it ended up looking OK, but not ideal.
Before
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-6px",
marginBottom: "-6px",
}
MuiStepLabel: {}
}
}
After
// src/Theme/index.tsx
export const themeOptions: ThemeOptions = {
overrides: {
MuiStepConnector: {
marginTop: "-2px",
marginBottom: "-4px",
minHeight: "calc(24px + 0.5rem)",
},
MuiStepLabel: {
height: "1.25rem",
lineHeight: "1.25rem",
}
}
}
Sandbox
https://codesandbox.io/s/epic-bohr-0p7fj?file=/src/Theme/index.ts
I'm trying to override some MUI styles in React Material UI. This is currently working for me:
MuiTab: {
root: {
color: '#284568',
},
textColorInherit: {
opacity: 1,
},
wrapper: {
textTransform: 'capitalize',
},
'&$selected': {
backgroundColor: '#000',
border: '1px solid #CFDCE8',
},
},
However, it gives me a warning on the console:
"getStylesCreator.js:42 Material-UI: You are trying to override a
style that does not exist. Fix the &$selected key of
theme.overrides.MuiTab."
I tried to convert to:
MuiTab: {
root: {
color: '#284568',
'&$selected': {
backgroundColor: '#000',
border: '1px solid #CFDCE8',
},
},
textColorInherit: {
opacity: 1,
},
wrapper: {
textTransform: 'capitalize',
},
},
The warning was gone, but the style won't apply anymore :(
Any suggestions?
Thanks.
I'm using grommet-ui with webpack and react.
How do I set my own color options.
Is there a way to use my own custom colors/color schemes in place of predefined colors like colorIndex="neutral-1".
Yes, there is a way to override them, but it is currently not documented. I would start checking the colors here:
https://github.com/grommet/grommet/blob/master/src/scss/grommet-core/_settings.color.scss
For example, neutral-1 is used from this array
$brand-neutral-colors: (#5d0cfb, #7026ff, #767676) !default;
In your index.scss you can replace that (!default allows replacement):
$brand-neutral-colors: (#333333, #7026ff, #767676)
We are working on adding documentation for custom theme variables.
For Grommet v2 users, you can leverage the theme capabilities and define a customTheme as a js object with your desired colors, following the current structure:
const customTheme = {
global: {
colors: {
// Overriding existing grommet colors
brand: "#4D4CDB",
"accent-1": "#6FFFB0",
"accent-2": "#7FFFB0",
"accent-3": "#8FFFB0",
"accent-4": "#9FFFB0",
"neutral-1": "#10873D",
"neutral-2": "#20873D",
"neutral-3": "#30873D",
"neutral-4": "#40873D",
focus: "#000",
// Setting new colors
blue: "#00C8FF",
green: "#17EBA0",
teal: "#82FFF2",
purple: "#F740FF",
red: "#FC6161",
orange: "#FFBC44",
yellow: "#FFEB59",
// you can also point to existing grommet colors
brightGreen: "accent-1",
deepGreen: "neutral-2"
}
}
};
...
export const Example = () => (
<Grommet theme={customTheme}>
<Box background="orange" >
<Text color="deepGreen">Custom Color</Text>
</Box>
</Grommet>
);
You can override any Grommet color that is mentioned in the docs in a similar fashion.
Wrapping your application with the Grommet component that is pointing to your customTheme object as shown on the example, will allow you full access to your custom colors across your application.
Check the pre-packed themes from https://github.com/grommet/grommet/tree/master/src/js/themes and choose the one that's closest to your goal
Then write your own, but only the parts you want to change
Roll your complete theme by merging the pre-packed with your prefs like so:
import React from 'reactn';
import { dark } from 'grommet/themes';
import { deepMerge } from 'grommet/utils';
import { generate } from 'grommet/themes/base';
import { FormDown } from 'grommet-icons';
const localTheme = {
global: {
font: {
family: 'Montserrat, Roboto, sans-serif',
size: '14px',
lineHeight: '20px'
},
colors: {
brand: '#4040DB',
focus: '#50c050',
[dark-5]: '#aaaaaa',
[dark-6]: '#bbbbbb',
// [light-1]: '#ededed', // has error "light not defined"
},
input: {
padding: '5px;', // this renders a 4px padding!
},
},
button: {
hoverIndicator: {
dark: { color: dark-6 },
light: { color: 'light-3' },
border: { radius: '5px' }
},
disabled: {
color: dark-4,
opacity: '0.6',
},
border: {
width: '1px',
color: 'rgb(238,238,238)',
radius: '4px'
},
padding: 'none',
},
select: {
background: 'dark-1',
icons: {
color: 'rgb(238,238,238)',
margin: '0px 0px',
down: <FormDown />,
},
control: {
open: {
color: 'rgb(238,238,0)'
}
},
options: {
container: {
pad: 'xxsmall',
background: 'dark-1'
},
text: {
margin: 'none',
size: 'small',
color: 'light-1',
},
},
container: {
extend: () => `
flex-grow: 1;
`,
}
},
textArea: {
// not working: background: ${ localTheme.global.colors[dark-2] }; // dark-2
extend: () => `
background: ${ '#333333' }; // dark-1
margin: 2px 0px;
height: 100px;
&:hover {
background: ${ '#555555' }; // dark-2
}
&:focus {
background: ${ '#555555' }; // dark-2
color: ${ '#ffffff' };
}
&::placeholder {
color: dark-5;
font-style: italic;
font-weight: 200;
}
`,
},
textInput: {
extend: `
background: ${ '#333333' }; // dark-1
margin: 2px 0px;
&:hover {
background: ${ '#555555' }; // dark-2
}
&:focus {
background: ${ '#555555' }; // dark-2
color: ${ '#ffffff' };
}
&::placeholder {
color: dark-5;
font-style: italic;
font-weight: 200;
}
`,
},
};
export default recipesTheme
Notice that some of the lines are failed experiments trying to overcome the flaky docs.
This exports a recipesTheme module to be used in the render method of App or whatever:
<Grommet full = { true } theme = { recipesTheme }>
There is this tool https://grommet-theme-builder.netlify.com/ that you can use to somehow see the effect of your changes.