I am trying to overwrite the css of MuiPrivateTabScrollButton.
but this class is generated from material ui so I am not able to overwite.
even I debugged by putting border colors and find out the fix, but still I am not able to findout.
all my code is in tab-demo.js
Can you tell me how to fix it, so that in future I will fix it myself.
providing my code snippet and sandbox below
https://codesandbox.io/s/n5l8znn2y0
update 1: removed unnecessary code for easy debugging https://codesandbox.io/s/8xw88yl9j0
MuiPrivateTabScrollButton: {
width: "0 !important"
},
tabRoot: {
textTransform: "initial",
width: "stretch",
display: "flex",
flex: 1,
border: "1px solid red",
"&:hover": {
color: "red",
opacity: 1,
textTransform: "initial"
},
"&$tabSelected": {
color: "red",
fontWeight: theme.typography.fontWeightMedium,
textTransform: "capitalize"
},
"&:focus": {
color: "red",
textTransform: "capitalize"
}
},
In the documentation for each Material-UI component is a CSS section that indicates the classes that can be passed in to control CSS for different aspects. Here is that documentation for Tabs.
In particular you care about:
scrollButtons Styles applied to the ScrollButtonComponent component.
You then need to specify the appropriate class via the classes property.
For instance if you have the following in the styles passed to withStyles:
const styles = theme => ({
tabsScrollButton: {
backgroundColor: "green"
}
};
Then you would leverage that class like the following:
<Tabs
classes={{ scrollButtons: props.classes.tabsScrollButton }}
>
Related
here the changes herder row BG color work for me but how we can change the BG color of the striped row.
import React from 'react';
import DataTable from 'react-data-table-component';
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
striped: {
default: 'red'
},
}
function App() {
return (
<div className="App">
<h3>DataTable in React - Clue Mediator</h3>
<DataTable
title="Employees"
columns={columns}
data={data}
pagination
highlightOnHover
striped
customStyles={tableCustomStyles}
/>
</div>
);
}
export default App;
here I used the react-data-table-component and want to change the customized BG color of the striped row.
how can we do that?
After looking through the documentation for using custom styles found here and the available fields here, it appears you need to nest the striped styles inside of a row object in the style config.
Edit for comment:
To change the order of striped and non-striped rows, you could just swap the colors of the regular rows and striped rows (i.e. set the regular row to have the striped attributes and vise-versa).
Your tableCustomStyles should look like this (for even row stripes):
const tableCustomStyles = {
headRow: {
style: {
color:'#223336',
backgroundColor: '#e7eef0'
},
},
rows: {
style: {
color: "STRIPEDCOLOR",
backgroundColor: "STRIPEDCOLOR"
},
stripedStyle: {
color: "NORMALCOLOR",
backgroundColor: "NORMALCOLOR"
}
}
}
I was trying to use a npm package which has a Typography element from Material UI. This is written by me.
When I try to use it in a project, the typography css class properties override the custom css properties. An example is margin which is present in both the CSS classes but in some scenarios I see the margin of "MuiTypography-h1" overriding the custom css. How do I prevent this?
My general idea is custom CSS properties should always take precedence over MUI default CSS class properties. How can I make this happen ?
<Typography
variant="h1"
sx={{
width: '235px',
height: '96px',
fontSize: '20px',
fontWeight: 500,
lineHeight: '1.2',
color: 'primary',
textOverflow: 'ellipses',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 4,
WebkitBoxOrient: 'vertical',
marginTop: '11px',
}}
>
Title
</Typography>
Straight forward way to do: 🚀
you can directly override the MUI component with your custom CSS properties using the class name in your CSS file, for example in if you want to change the Button component's style, you can do this by applying your required CSS properties to "css-element-class-name" class on your "CSS" file as follows
.css-elemet-class-name{
color: yellow;
height: 25px;
padding: 15px;
}
I've found that, MUI theme should be created in order to override MUI--root properties with your css styles, so try somethins like this:
add your custome styles inside overrides:{}
const theme = createTheme({
overrides: {
MuiTypography: {
h1: {
'&.MuiTypography-gutterBottom': {
marginBottom: 7,
},
},
h2: {
marginBottom: props => (props.gutterBottom ? 20 : null),
},
},
},
});
and for the imports
import createtheme from '#material-ui/core/styles'
if you are using this version:
"#material-ui/styles": "^4.11.2",
How do I refer to the specific tags in the Adyen component in my css?
import AdyenCheckout from '#adyen/adyen-web';
import '#adyen/adyen-web/dist/adyen.css';
For example, this button
This is inside my
<div id="component-container"></div>
You can provide css rules that refer to the class you want to change, such as adyen-checkout__button to apply settings for any button created by adyen components or adyen-checkout__button--pay to change the pay button specifically.
Adyen provides a list of css classes.
For card fields, these use iframes to gather details and styling information has to provided when initializing the adyen component.
const checkout = new AdyenCheckout({
paymentMethodsResponse: paymentMethodsResponse,
clientKey: adyenClientKey,
paymentMethodsConfiguration: {
card: {
styles: {
base: {
color: 'black',
fontSize: '16px',
fontSmoothing: 'antialiased',
fontFamily: 'Helvetica',
},
error: {
color: 'red',
},
},
},
},
...
});
I noticed this website has a list of checkboxes, but when I look at the HTML I just see div's with CSS classes on them.
How do you create checkboxes and check them off just by using CSS?
What is the benefit of doing it via CSS?
You certainly can. The advantage is that it gives you way more flexibility. For example, here's a basic React component that uses divs for the checkbox:
https://jsbin.com/xarewiweza/1/edit?html,js,output
const styles = {
outer: {
borderRadius: 5,
border: '2px solid gray',
width: 30,
height: 30,
cursor: 'pointer',
},
inner: checked => ({
borderRadius: '50%',
height: 28,
width: 28,
backgroundColor: checked ? 'red' : 'transparent',
margin: 1,
transition: 'background-color 0.2s ease',
})
}
class Checkbox extends React.Component {
constructor(props) {
super(props)
this.state = {
checked: false,
}
}
render() {
console.log(this.state)
return (
<div
onClick={() => this.setState({ checked: !this.state.checked, })}
style={styles.outer}>
<div style={styles.inner(this.state.checked)} />
</div>
)
}
}
ReactDOM.render(<Checkbox />, document.body)
If you wanted animated checkmarks, or other cool stuff, you'd have to go custom.
The disadvantage is that you don't get some of the default HTML functionality, though I'm not sure if there is anything useful with the checkbox specifically. For example, with the default select on iOS, it automatically uses the carousel selecter, which is a handy feature.
I'm using 'material-ui' and trying to get a table element to change color when the element has a certain value. Below is the code I tried, if the cell value is "Out of Zone", the background should go red'ish. The table renders fine, but toggling the color change doesn't work, how come (or is my approach all wrong)?
function renderRowColumn(row, column) {
if (row.status == "Out of Zone") {
return (
<TableRowColumn className="ae-zone">
{row[column.name]}
</TableRowColumn>
)
}
return (
<TableRowColumn>
{row[column.name]}
</TableRowColumn>
)
}
In style.css:
.ae-zone {
background-color: '#e57373';
font: "white";
}
Your specificity on the css selector is not high enough. The rendered TD element has an inline style in which the background property is getting inherited which is overriding your class style.
Is there any reason since you already have the logic seperated out you don't just use inline styles for something like this.
<TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>
This is definitely working well and I tested it.
Your other option would be to add !important to your css.
td.ae-zone {
background-color: '#e57373' !important;
color: "white" !important;
}
I think if I had to chose though I would recommend the first as it is cleaner.
Don't put quotes around color values in css:
.ae-zone {
background-color: #e57373;
color: white;
}
Also, it's color: white, not font: white.
Most of the time the Table takes the default style, so if the styles didn't get applied try appending !important to the style. This worked for me.
.ae-zone {
background-color: '#e57373' !important;
color:red;
}
There is another way to do this :
import { makeStyles } from "#mui/styles";
// Declare this bellow your import
const UseStyles = makeStyles({
root: {
"& .MuiTableBody-root": {
backgroundColor: "#121212",
},
},
});
// Declare this after your declaration page
const classes = UseStyles();
// Now in your Table, use the class :
<Table className={classes.root}>
<TableHead>
{...}
</TableHead>
</Table>
With the inspector you can see each automatic class from Material UI and target them in the makeStyle.
Be carefull to use the same code example :
"& .MuiClassNameYouWantTarget" : {
textAlign: "center",
},