I am following their documentation from Here to modify default Paper component properties.
Here is my code.
import { styled } from '#mui/material/styles';
import { Modal, Button, TextField, Grid, Paper } from '#mui/material';
const Item:any = styled(Paper)(({theme}) => ({
// ...theme.typography.body2,
root: {
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
},
padding: theme.spacing(1),
textAlign: 'center',
color: theme.palette.text.secondary,
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
'& .MuiPaper-root': {
boxShadow: '1px 1px 1px 1px rgba(255,255,255,0.2)',
}
}));
const MyComponent = (props: any) => {
return (
<Grid container>
<Grid item xs={8}>
<Item elevation={1} square variant="outlined">xs=8</Item>
</Grid>
</Grid>
)
}
What am I doing wrong here?
You should change the value of boxShadow, current value is white and is diapered, change to black like below.
Try this code, I tested, worked for me:
const Item = styled(Paper)(({theme}) => ({
padding: theme.spacing(1),
textAlign: 'center',
color: '#000',
backgroundColor: 'pink',
boxShadow:'3px 3px 5px 3px rgb(0 0 0 ,0.2)'
}));
Related
I am using Material UI v5 Outlined TextField component to create a form. As shown in the picture below there is a white padding border coming in the TextField. I have made CSS that input field color changes to yellow on focus.
My code is as follows
// CSS
.OutlinedTextFieldCSSStyle {
font-size: 13px !important;
padding: 0 !important;
}
// Material-Ui styles
export const useStyles = makeStyles({
OutlinedTextField: {
"& .MuiOutlinedInput-root": {
"& fieldset": {
borderColor: "#949595", // grey color
borderWidth: 1.5,
},
"&:hover fieldset": {
borderColor: "#949595", // grey color
},
"&.Mui-focused fieldset": {
outline: "none",
borderColor: "#949595", // grey color
boxShadow: "0 5px 5px 0px #949595",
},
},
"& .Mui-focused": {
"& .MuiOutlinedInput-input": {
backgroundColor: "#FFFF80 !important", // yellow color
borderColor: "#FFFF80 !important", // yellow color
borderWidth: 0,
outline: "none",
},
},
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
},
}
});
// TextField
<TextField
{...params}
type="text"
size="large"
variant="outlined"
fullWidth
className={classes.OutlinedTextField}
InputProps={{
...params.InputProps,
classes: {
input: "OutlinedTextFieldCSSStyle",
},
}}
/>
How can I remove this white padding border so that the textfield entire background color is yellow/grey and the font size covers the entire textbox ?
You can add your padding: 0 into your .MuiOutlinedInput-input style definitions:
export const useStyles = makeStyles({
OutlinedTextField: {
// ... your other styles
"& .MuiOutlinedInput-input": {
backgroundColor: "#F5F5F5 !important",
borderWidth: 0,
outline: "none",
borderColor: "white !important",
padding: 0 // <-- added zero padding instruction
}
}
});
While I know how to write a render method's return in pug, I am stuck in a place where I have to pass a component as an attribute's value of some another component.
Inside my react render method, I am returning the following code :
<PDFDownloadLink document={<PdfDocument data={meetingDetails} />}
fileName="meetingName.pdf"
style={{
textDecoration: "none",
padding: "10px",
color: "#4a4a4a",
backgroundColor: "#f2f2f2",
border: "1px solid #4a4a4a"
}}>
{({ blob, url, loading, error }) =>
loading ? 'Loading document...' : 'Download'
}
</PDFDownloadLink>
where I am importing PdfDocument as well as PDFDownloadLink components.
Now I have to write the same thing in pug, which I did as below...
1.
PDFDownloadLink(document={<PdfDocument data={meetingDetails} />}
fileName="meetingName.pdf"
style={{
textDecoration: "none",
padding: "10px",
color: "#4a4a4a",
backgroundColor: "#f2f2f2",
border: "1px solid #4a4a4a"
}} )
PDFDownloadLink(document={PdfDocument(data={meetingDetails} ) }
fileName="meetingName.pdf"
style={{
textDecoration: "none",
padding: "10px",
color: "#4a4a4a",
backgroundColor: "#f2f2f2",
border: "1px solid #4a4a4a"
}})
Both do not seem to work. Any sort of help / guidance would be helpful.
I am using the react mui library to create a tooltip for my application. I got the tooltip set up easy enough, but I am running into issues when I attempt to style it. I get the required style but I can not see the arrow of the tooltip unless I am zoomed in a considerable amount.
The styles
import Tooltip from '#material-ui/core/Tooltip';
import {withStyles} from "#material-ui/core"
const CustomTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: '#FFFFFF',
color: '#1C2023',
border: '2px solid #A7AFB3',
fontSize: '10px',
fontWeight: '600',
lineHeight: '12px',
textAlign: 'center',
boxSizing: 'border-box',
padding: '5px 14px 5px 20px',
fontFamily: 'Open Sans',
},
arrow: {
color: '#FFFFFF',
'&::before': {
border: '2px solid #A7AFB3'
}
}
}))(Tooltip)
export default CustomTooltip;
In my file themeConfig.js I have declared some theme variables that I use throughout my app to style various components. I need to use the scrollbar -webkit to persist a scrollbar for certain components. The -webkit styles are long and bulky, so I want to be able to add them to my themeConfig.js file. These scrollbar styles are pseudo-elements and while I can assign them, I haven't been able to figure out how to use them in themeConfig.js.
themeConfig.js
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
...
}
})
export default myTheme
ComponentExample.js
import { makeStyles } from '#material-ui/core'
const ComponentExample = () => {
const classes = useStyles()
return (
<div className={classes.mainDiv}>I'm a div</div>
)
}
const useStyles = makeStyles(theme => ({
mainDiv: {
height: theme.layout.mainDivHeight,
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
}
}))
export default ComponentExample
It would be great if I could stuff this into a variable in my theme file and apply it to a component:
overflowY: 'scroll',
'&::-webkit-scrollbar': {
width: 8,
},
'&::-webkit-scrollbar-track': {
boxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
webkitBoxShadow: 'inset 0 0 6px rgba(0,0,0,0.00)',
},
'&::-webkit-scrollbar-thumb': {
backgroundColor: 'rgba(0,0,0,.2)',
outline: '1px solid slategrey',
borderRadius: 7,
},
But the way theme styles are declared in makeStyles, there is a 1:1 property assignment and I don't know how to gracefully apply a whole style object like that to a component. Any advice is greatly appreciated!
The styles declared in makeStyles are within an object and that object can be constructed in any of the ways JavaScript supports. The way I would handle this is to put the styles that you want to use within a single object in the theme (scrollbarStyles in my example below) and then use object spread syntax in the place where you want to use it within makeStyles.
Here is a working example:
import React from "react";
import {
createMuiTheme,
ThemeProvider,
makeStyles
} from "#material-ui/core/styles";
const myTheme = createMuiTheme({
layout: {
header: 64,
sideNav: 45,
mainDivHeight: 250,
scrollbarStyles: {
overflowY: "scroll",
"&::-webkit-scrollbar": {
width: 8
},
"&::-webkit-scrollbar-track": {
boxShadow: "inset 0 0 6px rgba(0,0,0,0.00)",
webkitBoxShadow: "inset 0 0 6px rgba(0,0,0,0.00)"
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "rgba(0,0,0,.2)",
outline: "1px solid slategrey",
borderRadius: 7
}
}
}
});
const useStyles = makeStyles(theme => ({
mainDiv: {
...theme.layout.scrollbarStyles,
height: theme.layout.mainDivHeight
}
}));
function ComponentExample() {
const classes = useStyles();
return (
<div className={classes.mainDiv}>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
<div style={{ margin: "50px" }}>
I'm a div with enough content to make me scroll
</div>
</div>
);
}
export default function App() {
return (
<ThemeProvider theme={myTheme}>
<ComponentExample />
</ThemeProvider>
);
}
I have written following test:
it('componentDidUpdate should mount and change props', () => {
const onChange = jest.fn();
const wrapper = enzyme
.mount(
<JsonInput
onChange={onChange}
onValueChange={mockOnValueChange}
value={exampleJsonStringValidated}
/>,
{ wrappingComponent: withTestThemeWrapper },
);
console.log(wrapper.debug());
expect(wrapper.find(JsonInput).hasClass('valid')).toEqual(true);
wrapper.setProps({ value: exampleJsonStringNotValidated });
expect(wrapper.find(JsonInput).hasClass('invalid')).toBe(true);
});
and console.log shows:
<JsonInput onChange={[Function: mockConstructor]} onValueChange={[Function: mockConstructor]} value="{"firstName":"John","lastName":"Doe","age":210}">
<styled.textarea onChange={[Function]} value="{"firstName":"John","lastName":"Doe","age":210}" height="">
<StyledComponent onChange={[Function]} value="{"firstName":"John","lastName":"Doe","age":210}" height="" forwardedComponent={{...}} forwardedRef={{...}}>
<textarea onChange={[Function]} value="{"firstName":"John","lastName":"Doe","age":210}" height="" className="sc-bdVaJa lavZWj" />
</StyledComponent>
</styled.textarea>
</JsonInput>
In the component the code className="sc-bdVaJa lavZWj" is valid and invalid but now I see that there is no readable names of classes, how to test it?
Component (styled part)
export const StyledTextArea = styled.textarea<{ height: string }>`
margin: 0;
box-sizing: border-box;
width: 350px;
outline: none;
border: none;
height: ${props => props.height};
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.23);
background-color: ${props => props.theme.palette.foreground};
color: ${props => props.theme.palette.text};
cursor: text;
&:focus{
border-bottom: 2px solid ${props => props.theme.palette.active};
}
&:valid{
border-bottom: 2px solid ${props => props.theme.palette.positive};
}
&:invalid{
border-bottom: 2px solid ${props => props.theme.palette.negative};
}
`;
and render:
render() {
// to exclude unknown property 'onValueChange' for JsonInput for DevTools
const { height = '', onValueChange, ...restProps } = this.props;
return (
<StyledTextArea
ref={this.JsonInputRef}
{...restProps}
onChange={this.handleValueChange}
height={height}
/>
);
}
So you does not need(and cannt) to test classnames themselves since :valid and :invalid are state/pseudoselector.
For toHaveStyleRule from jest-styled-components there is 3rd argument options where we could provide desired state like :hover or :valid.
Try this:
expect(wrapper
.find('textarea')
.toHaveStyleRule(
'border-color',
'border-bottom: 2px solid red',
{modifier: ':invalid'}
)
).toBeTruthy();