How can I pass the styles overlayProps into the Panel component as it is stated in https://developer.microsoft.com/en-us/fluentui#/controls/web/panel
I tried:
<Panel
overlayProps={{styles:{backgroundColor:'red'}}}
/>
But does not seems to work
The only thing missing from the original source is root, which is the target element in the overlay.
This snippet (full example) shows a Panel with a red overlay. (full example)
const PanelBasicExample: React.FunctionComponent = () => {
return (
<div>
<Panel
headerText="Sample panel"
isOpen={true}
overlayProps={{ className: "foo", styles: { root: { backgroundColor: "red" }}}}
>
<p>Content goes here.</p>
</Panel>
</div>
);
};
layerProps is an optional props to pass to the Layer component hosting the panel.Do you have a Layer Component?
Also, styles can have a className as properties, you may try to give the component a customised name and adapt the css.
i guess you can check out the "Panel - custom navigation" provided in your link.
it has something like below to override searchbox. I think Panel should be the same since it also accepts a similar styles prop.
const searchboxStyles = { root: { margin: '5px', height: 'auto', width: '100%' } };
<SearchBox
placeholder="Search here..."
styles={searchboxStyles}
ariaLabel="Sample search box. Does not actually search anything."
/>
Related
I am looking for something like this to implement in ReactJS/Material-UI. Any existing component or library for this?
You can do that with the Autocomplete component by overriding the ListboxProps of the Listbox which is the container of the dropdown and set the CSS grid to display 3 equal width columns using the fr unit:
<Autocomplete
ListboxProps={{
style: {
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr",
maxHeight: "initial",
}
}}
Now assuming the option has the following type:
type TagOption = {
tag: string;
views: number;
description: string;
};
In the Stackoverflow dropdown, there are only 6 options at max, so we need to restrict the number of options shown in the Listbox:
import Autocomplete, { createFilterOptions } from "#mui/material/Autocomplete";
const _filterOptions = createFilterOptions<TagOption>();
const filterOption = (props, state) => {
const results = _filterOptions(props, state);
return results.slice(0, 6);
};
<Autocomplete filterOptions={filterOption}
We also want to create a customized option component for each grid item. Here is a minimal example without any much styles to get you started:
function OptionItem({ option, ...other }) {
return (
<li
{...other}
style={{
display: "block"
}}
>
<div>
<Chip label={option.tag} />
{option.views}
</div>
<div>{option.description}</div>
</li>
);
}
renderOption={(props, option, { selected }) => (
<OptionItem {...props} option={option} />
)}
And finally set the isOptionEqualToValue and getOptionLabel to ensure that the option get filtered properly and the input display the correct tag when selected:
isOptionEqualToValue={(option, value) => option.tag === value.tag}
getOptionLabel={(option) => option.tag}
Live Demo (Source)
That's not a perfect fit, but you can use autocomplete (using multiple, customizable and asynchronous)
The goal is to style a prop inside a function (if the prop exists).
More specifically, I basically pass an icon (from styled-icons) as a prop to it and it is supposed to add styling to that icon.
This works with warnings:
const InputRounded = ({ type, placeholder, icon }) => {
const Icon = styled(icon)`
color: #807da0;
width: 1.75rem;
margin: 0 1.25rem 0 0.75rem;
`
return (
<Container>
<Input type={type} placeholder={placeholder} />
<Icon />
</Container>
)
}
Here is how I call it:
import { LockPassword } from '#styled-icons/remix-line'
<Input type="password" placeholder="Password" icon={LockPassword} />
I am aware that one shouldn't create a component inside a function, but I have tried numerous ways otherwise and haven't reached anywhere. Any help for a better method would be greatly appreciated.
You can, very simply, pass a style prop to icon.
const InputRounded = ({ type, placeholder, icon: Icon }) => {
return (
<Container>
<Input type={type} placeholder={placeholder} />
<Icon style={{ color: '#807da0', ... }} />
</Container>
)
}
You could probably use the cloneElement method in React
https://reactjs.org/docs/react-api.html#cloneelement
return (
<>
{ React.cloneElement( icon, [props] }
</>
)
It is similar to
<element.type {...element.props} {...props}>{children}</element.type>
To override some values you can do inline styling.
or otherwise you could use some css classes to override with selectors as well.
if you are going to use styled-icons
you can just simply provide it the props directly.
Styled Icons accept all the valid props of an <svg /> element
https://github.com/styled-icons/styled-icons#props
I am using this package in my React application.
The problem is when running the application in a specific device Galaxy Fold, the container of selecting images is too big.
I need to change the size of the div with this id rc-imageselect.
Here is my code
<div className={classes.recapt} style={{ transform: 'scale(0.8, 0.8) translateX(10%)', display: "table" }}>
<Recaptcha
expiredCallback={() => setCaptchaCode(false)}
sitekey={localStorage.getItem("CAPTCHA_KEY")}
render="explicit"
onloadCallback={callback}
verifyCallback={verifyCallback}
/>
</div>
export default makeStyles((theme) => ({
recapt: {
"&div": {
"&#rc-imageselect": {
transform: 'scale(0.8, 0.8) translateX(10%)'
}
}
}
}));
But this doesn't work.
I changed it in te inspect panel and it works. So my guess I am selection the div in a wrong way.
Any help would be appreciated.
I think your style targeting has problem, try like this :
"& > div > image"
And i think u cannot using query (#elementID) on that .
Edit
After uploading photo : Take look at this
I am using material-table "https://material-table.com/"
This is my component that renders a table of data. Here, I am using a custom button inside title for adding new data. It is inside title so that the button goes on the top-left side. I am not using the default add option given by material-table because I want to display a separate form page for adding data instead of inline-adding given by material-table. It works perfectly.
The problem is that the default styling of title has overflow:hidden which can be seen by inspecting it.
<div class='MTableToolbar-title-35'> .... </div>
I want this overflow:hidden to be overflow:auto. How can I override the styling of this title?
export const EmployeeView = ({columns,data}) => {
return (
<div>
<MaterialTable
columns={columns}
data={data}
title={
<div>
<IconButton size='small' color='primary' onClick={() => console.log("Add employee")}>
<AddCircleIcon />
</IconButton>
</div>
}
onRowClick={(event,rowData) => console.log(rowData)}
/>
</div>
)
}
Please use this in the css file
.MuiTypography-h6{
font-size: 1rem;
color: red;
overflow:auto
}
I mentioned the color and font size for testing.
I use the example autocomplete field from the Material-UI lib documentation. (https://material-ui.com/demos/autocomplete/#react-select)
There is a problem with fliping the menu when it opens at the bottom of the page or the browser's viewport.
Is there a way to fix this problem with Material-UI and react-select?
Or do I need to write something custom?
If you are not using a <Menu/> custom component, you can use the menuPlacement="auto" prop of <Select/>, then your problem is solved.
const components = {
Control,
// Menu , <-- delete it
NoOptionsMessage,
Option,
Placeholder,
SingleValue,
ValueContainer
};
https://github.com/JedWatson/react-select/issues/403
Otherwise you can choose another selector, material-ui provides 2 more differents integration with the <Popper/> component: react-autosuggest and downshift.
https://material-ui.com/demos/autocomplete/
Hope it helps!
i've faced the same problem, for <Select /> component i have used what TomLgls suggest, but for <AsyncSelect /> as a work-around, i used some offset calculations in my component :
const rootHeight = document.getElementById('root').offsetHeight ;
const selectElement = document.getElementById('async_select_container_id');
const selectOffsetBottom= selectElement.offsetHeight + selectElement.offsetTop;
...
<AsyncSelect
{...listProps}
menuPlacement={
rootHeight - selectOffsetBottom > 210 ? 'auto' : 'top' // react-select menu height is 200px in my case
}
/>
i hope it helps as well
If you have created customMenu component then in that give className as open-menu-top and write this code for class:
.menu-open-top {
top: auto;
bottom: 100%;
}
Your CustomMenu maybe look like this:
const CustomMenu = ({ children, innerProps, innerRef, selectProps }) => {
return (
<div
ref={innerRef}
{...innerProps}
className={`rs-menu ${customMenuClass} open-menu-top`}
>
{Your Logic}
</div>
);
};