I have used react bootstrap to display a popup when page is loaded. I want to change the position of the box with tailwind css and the position is changing but there's a white box present on the screen. can you please help me how to remove it?
import React,{useState} from 'react';
import {Modal} from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
const Popup = () => {
const [show, setShow] = useState(true);
const handleClose = () => setShow(false);
return (
<>
<Modal show={show} onHide={handleClose}>
<Modal.Body className="bg-black absolute top-44"><input className="pl-2 py-1" placeholder="search..."/></Modal.Body>
</Modal>
</>
);
}
export default Popup
It will show because you are applying absolute position with top:44px you can use margin then it will show inside of white box if you don't required white box then you have to remove default background color from .modal-content class.
Related
I am using #mui/material with React + Typescript.
I want to change the warning color of the button by creating a custom theme but so far without success.
My _app.tsx
import {ThemeProvider as MaterialThemeProvider, StyledEngineProvider} from '#mui/material/styles';
import {createTheme} from '#mui/material';
import {green} from '#mui/material/colors';
import { AppProps } from 'next/app';
import Button from '#mui/material/Button';
const MyApp = function ({Component, pageProps}: AppProps) {
const MaterialUiLight = createTheme({
palette: {
warning: {
light: green[500],
main: green[500],
},
},
});
return <StyledEngineProvider injectFirst>
<MaterialThemeProvider theme={MaterialUiLight}>
<Button
variant="contained"
color="warning"
>
Please Change Color
</Button>
</MaterialThemeProvider>
</StyledEngineProvider>
}
Even though I have specified in the palette, warning to have green color I still see the default "orangish" color
So my question is: How can I change the color="warning" or "secondary" for the buttons or overall by using this createTheme function ? Seems like my colors are just ignored...
Material UI's Button component renders a relatively straightforward button element with a background color which we can see in a web inspector.
But when we examine this with getComputedStyle in a testing-library/react render, the reported color is 'transparent'.
Is there a way to test the button's background color?
For example, if a component returns:
<Button data-testid="blah" variant="contained" color="primary">
hi
</Button>
It creates a blue button (#3f51b5) with the default theme. But this test:
it("renders with the correct background color", () => {
const { getAllByTestId } = render(<App />);
const button = getAllByTestId("blah")[0];
const buttonStyle = window.getComputedStyle(button);
const backgroundColor = buttonStyle["background-color"];
expect(backgroundColor).toEqual("#3f51b5");
});
Fails with
Expected: "#3f51b5"
Received: "transparent"
Codesandbox link
Got an answer to this on GitHub, but long story short, this is a consequence of how JSDOM works. The "solution" is to test this with something like Cypress, not Testing Library. ¯\_(ツ)_/¯
In my app, the expansion arrow has to be in the left side of the panel.
But, by default it's displaying in the right side.
This :
<ExpansionPanelSummary
className={classes.panelSummary}
expandIcon={<ExpandMoreIcon />}
IconButtonProps={{edge: 'start'}}
aria-controls='panel1a-content'
id='panel1a-header'
>
Doesn't made it.
Granted, you can't (easily) change the order in which the components appear in the HTML. However, there is a way using only CSS. ExpansionPanelSummary uses display: flex; you can therefore set the order property on the icon to make it appear to the left of the content.
This can be achieved with either useStyles or withStyles (Or possibly using plain CSS, but I haven't tried it); here's how you'd go about using the latter:
import withStyles from "#material-ui/core/styles/withStyles";
const IconLeftExpansionPanelSummary = withStyles({
expandIcon: {
order: -1
}
})(ExpansionPanelSummary);
You can then write the rest of your code using IconLeftExpansionPanelSummary instead of ExpansionPanelSummary when you want the icon to appear to the left. Don't forget to set IconButtonProps={{edge: 'start'}} on the component for proper spacing.
<AccordionSummary
className={classes.accordionSummary}
classes={{
expandIcon: classes.expandIcon,
expanded: classes.expanded
}}
IconButtonProps={{
disableRipple: true
}}
></AccordionSummary>
You can add class and use flex-direction
accordionSummary: {
flexDirection: 'row-reverse'
}
It's simple
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className={classes.panelSummary}>
add css against this class in jss like this
panelSummary:{flexDirection: "row-reverse"},
In case using css
add class on <ExpansionPanelSummary> like this
<ExpansionPanelSummary className="panelSummary">
add css against this class in jss like this
.panelSummary{flex-direction: row-reverse;}
you can get the expansion panel icon on left by removing it from expandIcon and add it as a children in Summary something like this
<ExpansionPanel defaultExpanded={true}>
<ExpansionPanelSummary aria-controls="panel1a-content">
{this.state.expanded ? <RemoveIcon/> : <ExpandIcon />}
<Typography component='h4' variant='h4'>My Expansion Panel</Typography>
</ExpansionPanelSummary>
<ExpansionPanelsDetails />
</ExpansionPanel>
The challenge is that the order is hardcoded into the codebase and you will not be able to use the ExpansionPanel as is.
If you look at the implementation, you will find the code as below
<div className={clsx(classes.content, { [classes.expanded]: expanded })}>{children}</div>
{expandIcon && (
<IconButton
disabled={disabled}
className={clsx(classes.expandIcon, {
[classes.expanded]: expanded,
})}
edge="end"
component="div"
tabIndex={-1}
aria-hidden
{...IconButtonProps}
>
{expandIcon}
</IconButton>
)}
As you see the <div> contains the text and then the IconButton is displayed.
So, you may have to work with what's provided out of the box or create your own Component based on what material-UI provides.
Hope that helps.
You can modify the CSS class like this:
notice the absolute position, in this way you can move the div that contains the icon whatever position you want with 'left' or 'right' properties
const useStyles = makeStyles((theme) => ({
ExpansionPanelSummaryExpandedIcon: {
'& div.MuiExpansionPanelSummary-expandIcon': {
position: 'absolute',
right: '5%',
},
}
}));
and then use in the ExpansionPanelSummary
<ExpansionPanelSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1bh-header"
className={classes.ExpansionPanelSummaryExpandedIcon}
>
references:
https://cssinjs.org/?v=v10.3.0
https://v4-8-3.material-ui.com/customization/components/#overriding-styles-with-classes
I followed the steps in this link to change the background color material-ui --> Date Picker dialog by changing the theme. Changing the theme changed background color but it did not change the color of the OK and CANCEL buttons.How to change the color of OK and CANCEL buttons?
You have two options to customize the color of the OK and Cancel buttons.
(Easier) If you are okay with all flat buttons in your application using same, customized color you want to use on your Date Picker buttons, then you can simply add
flatButton: {
primaryTextColor: purple500, // Whatever color you want.
}
to the object you are passing into your getMuiTheme() call.
If you are only customizing the button colors in this situation, and want the other Flat Buttons in your application to take the theme's color, then you need to customize the muiTheme right before the DatePicker is used.
So if we wanted to have all of our Flat Buttons to be cyan500, then we would set that at our main
const mainMuiTheme = getMuiTheme({
flatButton: { primaryTextColor: cyan500 }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<MyDatePicker />
</MuiThemeProvider>
)
}
Then if wanted the buttons in our DatePicker to be customized, then we do that in a custom component.
class MyDatePicker extends React.class {
render() {
const muiTheme = getMuiTheme({
...this.context.muiTheme,
flatButton: {
primaryTextColor: purple500,
}
})
// Customize the muiTheme, and pass it down in a new MuiThemeProvider.
// Only Flat Buttons that are children of this component
// will have the new color.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<DatePicker />
</MuiThemeProvider>
)
}
}
MyDatePicker.contextTypes = {
muiTheme: React.PropTypes.object.isRequired
}
Material-UI uses Flatbutton as default on datepicker or for any dialog. Which means the OK/CANCEL button you see on datepicker is nothing but a flatbutton. So to apply background color to OK/CANCEL button of Date picker you have to use color instead of primaryTextColor. The color attribute of flatbutton does change the button background color. Please find example below and Screenshot here
import DatePicker from 'material-ui/DatePicker';
const mainMuiTheme = getMuiTheme({
flatButton: { color: '#333' }
})
const WrapperWithMainThemeProvider = (props) => {
return (
<MuiThemeProvider muiTheme={mainMuiTheme}>
<DatePicker
floatingLabelText="Date Of Birth"
hintText="Select Date Of Birth"
container="inline"
locale="en-US"
firstDayOfWeek={0}
autoOk={true}
value={this.state.dob}
onChange={this.changeDateOfBirth}
defaultDate={this.state.dateYesterday}
>
</DatePicker>
</MuiThemeProvider>
)
}
And below is what Material-UI expects muiTheme styles for FlatButton.
flatButton: {
color: transparent,
buttonFilterColor: '#999999',
disabledTextColor: fade(palette.textColor, 0.3),
textColor: palette.textColor,
primaryTextColor: palette.primary1Color,
secondaryTextColor: palette.accent1Color,
fontSize: typography.fontStyleButtonFontSize,
fontWeight: typography.fontWeightMedium,
}
For more information about muiTheme styles of each material-UI component check the following link https://github.com/mui-org/material-ui/blob/master/src/styles/getMuiTheme.js
I tested this and it worked for me. Hope this answer helpful.
I would like to set the colors of various parts of the slider,
the handle and both parts of the track: before and after the handle.
Or better still: make the slider invisible (but still working) so I can paint something myself based on the slider value...
I don't think the currently available style-property enables me to do this ?
You're right, you can't do this just using the style property.
However you can change it's colors customizing the mui theme.
http://www.material-ui.com/v0.15.0-alpha.2/#/customization/themes
Example:
import React from 'react';
import Slider from 'material-ui/Slider';
import MuiThemeProvider from 'material-ui/lib/MuiThemeProvider';
import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
const muiTheme = getMuiTheme({
slider: {
trackColor: 'yellow',
selectionColor: 'green'
},
});
const SliderExample = () => (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<Slider />
</MuiThemeProvider>
</div>
);
export default SliderExampleSimple
Note: The handle will have the same color as the line before it..(selectionColor)