I want something like this Here is the example!
I try with the material UI box, but it's not rendering the box only rendering the text.
Here is the code:
import * as React from 'react';
import Box from '#mui/material/Box';
export default function BreakpointsAsArray() {
return (
<div>
<Box sx={{ width: [100, 200, 300] }}>This box has a responsive width.</Box>
</div>
);
}
Material UI's Box name is quite deceptive and it doesn't mean a rectangle box will automatically be created in the rendered HTML. Here is some good explanation of the box component. You still need to add css/styling to make it according to your choice. The rectangle box you see in your shared image, is actually added (through some website code) to the better distinguish between the documentation text and the code snippet output. Anyhow, I forked the codesandbox example and added some custom styling to show, how the styling can be updated. You can use the sx prop to add any styles you needed. here is a little example.
sx={{
width: "90%",
padding: "24px 20px", // theme padding
border: "1px solid rgba(0, 0, 0, 0.12)",
borderRadius: 4
}}
Related
I want to ask how to display the Sample Title Bar in the Icon Window Max section only and this is my coding.
import React from 'react'
import { TitleBar } from 'react-desktop/windows';
export default function App() {
return (
<div style={{
display: 'block', width: 400, paddingLeft: 30
}}>
<h4>React Desktop Windows TitleBar Component</h4>
<TitleBar
title="Sample TitleBar"
controls
isMaximized="true"
background="orange"
/>
</div>
);
}
And want to show the Icon Window Max
before:
after:
Here is the code I got the link coding from: Link
As pert react desktop documentation they only provided support to hide/show all three control, there is no such specific prop which we can use to hide individual tool from title bar.
So if we want to hide the other two option apart from maximize we can use css and overwrite existing css in following way
.titlebar a[title="Close"],
.titlebar a[title="Minimize"] {
display: none !important;
}
I have given class to Titlebar component and hide element using css.
Codesandbox
I am quite new to React and I am trying to update the text color of the Progress React component from Ant Design - https://ant.design/components/progress/. I checked through the documentation of ant design but did not find any property or attribute for changing the text color. On doing inspect element, I found that it is using the css class .ant-progress-circle .ant-progress-text. Can anyone tell me how to change the color of component after using it? This is how I am using the component:
<Progress
style={{
position: 'absolute',
top: 50,
left: 750,
color: '#C64242',
}}
width={155}
percent={80}
strokeColor={'#D64242'}
strokeWidth={12}
format={() => 'High'}
type="circle"
/>
I am able to update positions (top, left) of the component, but somehow the color is not getting applied. I am not sure how to tackle this problem!
There are few style classes that applied to the text in Progress which you identified.
.ant-progress-circle .ant-progress-text.
And when Progress is 100% it applies .ant-progress-status-success style also to the text.
So to overcome this issue, need to override these styles Inside specific Progress element. That can be achieved by wrapping that Progress with a div and apply style changes to those .ant-progress-circle .ant-progress-text and .ant-progress-status-success classes which are inside this div.
Progress Element
{/* Here we wrap the Progress component with 'div' and override the style classes
(.ant-progress-circle .ant-progress-text) styles provided by antd styles */}
<div className="progress-div">
<Progress
style={{
position: "absolute",
top: 100,
left: 250
}}
width={155}
percent={percent}
strokeColor={"#D64242"}
strokeWidth={12}
format={() => "High"}
type="circle"
/>
</div>
CSS
.progress-div .ant-progress-circle .ant-progress-text {
color: #32a852;
}
From this we can override the style of text which is inside that div.
If you want to change the text-color for different values of the progress, keep styles for each color and change those styles when each values.
for example -- CSS ---
.progress-low .ant-progress-circle .ant-progress-text {
color: #32a852;
}
.progress-mid .ant-progress-circle .ant-progress-text {
color: #ffbf00;
}
.progress-high .ant-progress-circle .ant-progress-text {
color: #c64242;
}
Now dynamically change the style class that need to apply.
<div className={style}> // dynamic style.
<Progress
// attributes
/>
</div>
check this example codesandbox which have full demo of how to apply different text colors (style-classes) in different progress values.
Simplest way to override antd components style is search class from developer tool(inspect element) and override the class.
for your example it will be
.ant-progress-text{
color:red !important
}
as a result it will override the style globally.
if you want to override the style for specific element only, just add wrapper to the component with css class and override the style
example
<div className="parent">
<Progress
style={{
position: "absolute",
top: 100,
left: 250
}}
width={155}
percent={percent}
strokeColor={"#D64242"}
strokeWidth={12}
format={() => "High"}
type="circle"
/>
</div>
and css will be
.parent .ant-progress-text{
color:red !important
}
and it will override style of that specific element only
I think the only way to change the text color is to overwrite .ant-progress-text class.
check this: How to override style of a single instance of a component
So I've added modal to my project. Now I've added it with installing a package called react-modal.
Everything works great, I just can't make it transparent.
When users get on a single article page, if he wants, on a click a button opens a modal with a form. Now I want to keep the form box centered, everything else transparent(so a user can see the background).
Now react-modal uses customStyles and I've tried adding into it backgroundColor: 'rgba(0, 0, 0, 0.5)' and few other backgroundColor but nothing really worked. I've also tried adding transparent={true} into the <Modal /> but that doesn't work.
Here where I use modal:
import Modal from 'react-modal';
Modal.setAppElement('#root');
const customStyles = {
content: {
top: '50%',
left: '50%',
right: 'auto',
bottom: 'auto',
marginRight: '-50%',
transform: 'translate(-50%, -50%)',
},
};
<Modal
isOpen={isOpen}
onRequestClose={toogleModal}
style={customStyles}
transparent={true}
contentLabel='Forma'
>
And here is a picture when the modal is open:
It's only saying that u need to register first, and if u have an account it opens a form.
So is it even possible to make it transparent? I want to keep just this box with an outline, and everything that is white, to make it transparent so users can see the background page.
Thanks!
It looks to me like the styling was done by something else that you set earlier (or from other styling library). Can you post more code of the content: the one with the "Please register first"? Also you can try opacity: '50%' (or whatever percent you want).
For this fullstack app I moved into the original devs seem to have implemented some component to create the tables for the app's webpage
Problem is the padding on all the cells is quite large. Opening the rendered page in chrome and using chrome developer tools I can see
.MuiTableCell-sizeSmall{
padding: 6px 24px 6px 16px;
}
It seems like MuiTableCell isn't directly implemented in the code (hence I'll only see it in the rendered DOM and not in the code) . Seems like it mostly implements material-ui and material-table.
I have a little front end experience but I'm not familiar with what to do next to modify the padding.
Specifically, from playing around with the chrome developer tools, I want to set the right padding (set at 24px) down to 0px so that the rendered DOM uses this
.MuiTableCell-sizeSmall{
padding: 6px 0px 6px 16px;
}
Any advice?
Some imports from #Material-UI i think might be relevant are:
ToolBar, Appbar, FormControl, InputField, TextField, ViewColumn, and TablePagination
And imported from material-table are' MaterialTable, and MTableToolbar
In intellij I did a blind search and found that the SizeSmall property seems to come from TableCell (part of material-ui)
That CSS is the work of small value for size prop.
One of the ways to override it is to use makeStyles and override .MuiTableCell-sizeSmall
import { makeStyles } from '#material-ui/core/styles';
const useStyles = makeStyles({
customTable: {
"& .MuiTableCell-sizeSmall": {
padding: "6px 0px 6px 16px" // <-- arbitrary value
}
},
});
function YourComponent() {
const classes = useStyles();
return (
...
<Table classes={{root: classes.customTable}} size="small">
...
The top answer is deprecated, see: https://mui.com/system/styled/
Here is how you modify a table cell in MUI, here I remove the default padding for example.
const StyledTableCell = styled(TableCell)({
padding: 0,
})
You can then use the custom, or the original Cell component in your table.
<TableContainer>
<Table>
<TableBody>
<TableRow>
<TableCell>Normal cell.</TableCell>
<StyledTableCell>Custom style here.</StyledTableCell>
<TableCell align="right">Great.</TableCell>
</TableRow>
</TableBody>
</Table>
</TableContainer>
I'm trying to display three cards in a grid. The media of the card has a max-width of 345px but because of that the card gets a lot of margin-right. Styling doesn't look good in a grid. Anyone know how I can get rid of the margin?
I have an example made in sandbox: https://codesandbox.io/s/6451nx4ypr
The issue is with the grid. The Card has max size, but the grid is larger. This leave some extra space. If you look in the debugger, there is no margin to change.
You can try the following:
const styles = {
card: {
maxWidth: 345
},
gridFour: {
maxWidth: 345
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover",
}
};
And in the change the grid class to:
<Grid item sm={4} className={classes.gridFour}>
Sandbox: https://codesandbox.io/embed/k3k2m35mz5
You can also center the cards in the Grid:
const styles = {
card: {
maxWidth: 345,
margin: 'auto'
},
gridFour: {
align: 'center'
},
media: {
// ⚠️ object-fit is not supported by IE11.
objectFit: "cover"
}
};
I don't know if it works differently in React, but in Angular, I just apply classes to whatever it is I need to restyle and it seems to take.
If you have the objects in another container of some kind, make sure it doesn't apply some margin/space (like a flex container or something). Apply something to the container items to strip away any of that.
Simple example, this strips away all padding and margins and has the predictable effect on the backgrounds (I just tried it in a project, it works as expected):
mat-card {
margin: 0;
padding: 0px;
background-color: grey;
}
mat-card-content {
margin: 0;
padding: 0px;
background-color: red;
}
If you are familiar with bootstrap, there is this feature called grid offsets. Unfortunately, this is still not a feature to material-ui.
So, what you can do is remove the max-width on your cards. Then add an empty Grid to the sides to create an offset.
If you are expecting the width to be defined and should fluid on the screen when the screen width increased is as showed in this codepen link.
And this will have default width as 4 and doesn't have custom style to define a width to considered as responsive width.