Develop Reference

Component is not being styled according to className

For some reason setting className is not styling my property:
export default class MyComponent extends Component {
render() {
return(
<div className={styles.example}>
</div>
)
}
}
const styles = StyleSheet.create({
example: {
background: 'black',
width: '100px',
height: '100px'
}
})
It just renders something like
<div class="175">
</div>
With no styling information (there is no CSS rule for the ""class"" 175)
Why is it not (as I expect) ending up with a name like styles__example___2w27N with CSS rules specified in the browser
.styles__example___2w27N {
background-color: 'black';
height: 100px;
width: 100px;
}
How do I get my CSS to be applied?
If I use style={styles.example} (instead of className) I actually get this error:
The style prop expects a mapping from style properties to values, not a string.
I would prefer to use className though because
I have specified hover and active styles, does style work with those?
I want to manually add and override some styles inline

You should be using the <View> component instead of the <div> component, as that will map the <View> component to the native view UI components for each specific platform that you're using (ie: <div> for web, android.view for android, etc.) and not the <div> element directly.
With that, the <View> element and other react-native core components are designed to work with StyleSheet. You should be applying your style to the style prop which all core components have, and not the className prop:
<View style={styles.example}>
</View>
When the above is viewed on the web, you'll see a <div> being used in the source, but on other platforms you'll see other native view UI types being used.

Stylesheet refers to React Native... are you doing react-js or react native?
Assuming you are doing react-js (because of the div), there is no such thing as stylesheet in react-js...
export default class MyComponent extends Component {
render() {
return(
<div className={styles.example}>
</div>
)
}
}
const styles = {
example: {
background: 'black',
width: '100px',
height: '100px'
}
}
I think you copied the code from a react-native document instead of the react-js...

How to disable the Material UI Link API component

I was previously using Material UI's Button component, which has the disable property. Basically that prop allows the button to be disabled based on a boolean. So if true, then it is disabled. However, now I want to switch to the Material UI Link component which is also a button, but it looks like a text. It does the same thing a button does, but looks like a link. However, it does not have the disable property or it seems because I dont see it as a possible property in the Material UI docs. Is there any work around for this?
*Note - This is not from the React Router Dom library. I am using the Link from Material UI Library for React. Just so there is no confusion.
<Link
hover
underline="hover"
variant="body2"
onClick={
this.buyAll
}>
Buy All Products
</Link>

Material-UI's Link renders as an <a> element by default. If you want it to render as a <button> (which would be appropriate when you are specifying onClick and not specifying href), then you need to specify component="button". Once you have done that, the disabled prop will work as expected with the caveat that Material-UI's Link doesn't have any styling for a "disabled" look; so if you want the link to look different when it is disabled, you will need to customize the styles for that state.
Below is a working example including some sample disabled styling:
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import MuiLink from "#material-ui/core/Link";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles((theme) => ({
root: {
"& > * + *": {
marginLeft: theme.spacing(2)
}
}
}));
const Link = withStyles({
root: {
"&[disabled]": {
color: "grey",
cursor: "default",
"&:hover": {
textDecoration: "none"
}
}
}
})(MuiLink);
export default function Links() {
const classes = useStyles();
return (
<Typography className={classes.root}>
<Link component="button" onClick={() => console.log("hello")}>
Link
</Link>
<Link
component="button"
disabled
onClick={() =>
console.log(
"I'm disabled so this doesn't appear in the console when this is clicked."
)
}
>
Disabled Link
</Link>
</Typography>
);
}

Thank #RyanCogswell. I tried to improve his answer by defining a custom theme, based on MUI's default theme and using pointer-events: none:
import { createTheme } from '#mui/material/styles'
const { palette } = createTheme() // MUI's default theme
const theme = createTheme({ // Our app's custom theme
MuiLink: {
styleOverrides: {
root: {
'&[disabled]': {
color: palette.action.disabled,
pointerEvents: 'none',
},
},
},
},
})
import { Link } from '#mui/material'
//...
<Link
disabled
to='https://stackoverflow.com/a/72479343/5318303'
>
Disabled link
</Link>

Material UI strange blue line when overflow attribute is added

I'm using Material-UI with my React application. I'm also using styled components and I'm viewing the app in a Chrome browser. The issue I'm having doesn't occur when using a Firefox browser.
When applying the overflow attribute in my styled component, I'm seeing this blue line towards the bottom of the modal. This only appears when I'm playing with the size of my browser window. As I gradually bring my browser window closer to normal size, the line goes away. I'm not sure why this is or what I can do to fix it.
Here is a snippet of my code:
export const ScrollableModal = styled(MUIModal)(() => ({
overflow: 'scroll',
}));
const Modal = ({ title, children, actionsLeft, actionsRight, ...rest }) => {
const wrappedTitle =
typeof title === 'string' ? <Typography>{title}</Typography> : title;
return (
<ScrollableModal {...rest}>
<Container>
I've left the rest out because it's not relevant to my question.
Here is a screenshot of what I'm describing:

I guess that's the outline property what they mentioned in the documentation for simple modal:
Notice that you can disable the outline (often blue or gold) with the outline: 0 CSS property.
First needs to be added to the current style:
const useStyles = makeStyles({
modal: {
textAlign: 'center',
width: '35vw',
backgroundColor: 'white',
opacity: 0.8,
outline: 0, // add / remove
}
});
Then it can be applied on the Container just like the following in the render:
const styles = useStyles();
return <>
<Modal open={true}>
<Container className={styles.modal}>
<p>Simple Modal</p>
</Container>
</Modal>
</>
Result by adding and removing outline property with value 0:
I guess with styled components just create a styled Container with opacity: 0 if you don't want to use makeStlyes for this purpose.
That resolved the issue for me.
I hope that helps!

Extending Components in rebass.js?

Beginner here. As of now I can use Box like so:
<Box
p={5}
fontSize={4}
width={[ 1, 1, 1/2 ]}
color='white'
bg='magenta'>
Box
</Box>
and give it certain specified props, as it says on the site:
All margin and padding props
width: responsive width
fontSize: responsive font size
color: text color
bg: background color
flex: CSS flex shorthand property
order: CSS order property
alignSelf: CSS align-self property
Question: What if I need more props?
I know that I can extend rebass components, however, this seems to hard-code certain CSS properties into the component. E.g. If my Box is always purple I can create PurpleBox and save the color there. Or on their website there is this example:
const Container = props =>
<Box
{...props}
mx='auto'
css={{
maxWidth: '1024px'
}}
/>
Fair enough!
What what of I need to create a component, say, PositionedBox which gets an additional position prop for relative or absolute positioning?
I would like to use it like so:
<Box
p={5}
fontSize={4}
width={[ 1, 1, 1/2 ]}
color='white'
bg='magenta'
position='abs'>
Box
</Box>
Is this possible? Not sure how I could accomplish this.

You could make use of styled-components and styled-system
import styled from "styled-components";
import { position } from "styled-system";
// through interpolation
const StyledBox = styled(Box)`
// some properties
${position}
`;
// passing as a single property
const StyledBox = styled(Box)(position);
passing multiple properties
import { compose, property1, property2, ... } from "styled-system";
import StyledBox = styled(Box)(compose(property1, property2, ....));
this would extend all the position properties supported by the styled system.
list of all the out-of-the-box properties supported by styled-system here

Override CSS for MaterialUI's TablePagination's MenuItem

I don't know how to override CSS for child component MenuItem of TablePagination:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TablePagination/TablePagination.js
I'm using the component as:
<TablePagination
colSpan={2}
count={2}
rowsPerPage={2}
classes={{
root: classes.root, caption: classes.caption
}} />
Here it seems tricky to pass the style to the MenuItem. Could you please suggest some solutions?
Seems a new version of material-ui supports this: https://github.com/mui-org/material-ui/pull/11200/files. But just wondering what I should do if I cannot upgrade ...
Thanks!

Found myself one work-around. Basically its done by creating a SelectProps object:
selectProps = {
MenuProps: {
classes: {
paper: "bar"
}
}
};
Then in the TablePagination usage I use it:
<TablePagination SelectProps={this.selectProps} />
This gives the parent element of the select a CSS class called "bar". I then just override the CSS for "bar".