I'm using the preview Dropdown of Fluent UI.
I would like to reduce the width of the button. I tried to modify maxWidth: "500px", it did not work. I tried to add root={{ minWidth: "100px"}} in the <Dropdown, it did not work either.
Could anyone help?
CodeSandbox: https://codesandbox.io/s/distracted-gianmarco-51guru?file=/example.tsx
import { makeStyles, shorthands, useId } from "#fluentui/react-components";
import {
Dropdown,
Option,
OptionGroup,
DropdownProps
} from "#fluentui/react-components/unstable";
import * as React from "react";
const useStyles = makeStyles({
root: {
// Stack the label above the field with a gap
display: "grid",
gridTemplateRows: "repeat(1fr)",
justifyItems: "start",
...shorthands.gap("2px"),
maxWidth: "500px"
}
});
export const Grouped = (props: Partial<DropdownProps>) => {
const dropdownId = useId("dropdown-grouped");
const land = ["Cat", "Dog", "Ferret", "Hamster"];
const water = ["Fish", "Jellyfish", "Octopus", "Seal"];
const styles = useStyles();
return (
<div className={styles.root}>
<label id={dropdownId}>Best pet</label>
<Dropdown
aria-labelledby={dropdownId}
placeholder="Select an animal"
{...props}
>
<OptionGroup label="Land">
{land.map((option) => (
<Option key={option} disabled={option === "Ferret"}>
{option}
</Option>
))}
</OptionGroup>
<OptionGroup label="Sea">
{water.map((option) => (
<Option key={option}>{option}</Option>
))}
</OptionGroup>
</Dropdown>
</div>
);
};
Grouped.parameters = {
docs: {
description: {
story:
"Dropdown options can be semantically grouped with the `OptionGroup` element, with an optional group label."
}
}
};
Your issue it the "min-width:250px" value assigned to the button, I don't work with React but I did manage to do it this way, not sure if it is the best way but it does work :)
style={{minWidth:"auto"}}
Result:
Related
I would like to center the selected image instead of having it showing on the left hand side.
See image of behaviour:
I'm using the packages from the sandbox below in Next.js 11 with TailwindCSS 2.2.4:
https://codesandbox.io/s/5vn3lvz2n4
Dependencies:
"react-images": "^1.2.0-beta.7",
"react-photo-gallery": "^8.0.0"
I'm having a hard time targeting the CSS class, but I narrowed down to:
class="react-images__view react-images__view--isModal css-1qrom1v css-1ycyyax" using the browser dev tool in Safari.
Below is my PhotoLibrary file:
import React, { useState, useCallback } from "react";
import Gallery from "react-photo-gallery";
import Carousel, { Modal, ModalGateway } from "react-images";
import { photos } from "../data/photoData";
export default function PhotoLibrary() {
const [currentImage, setCurrentImage] = useState(0);
const [viewerIsOpen, setViewerIsOpen] = useState(false);
const openLightbox = useCallback((event, { photo, index }) => {
setCurrentImage(index);
setViewerIsOpen(true);
}, []);
const closeLightbox = () => {
setCurrentImage(0);
setViewerIsOpen(false);
};
return (
<div>
<Gallery photos={photos} onClick={openLightbox} />
<ModalGateway>
{viewerIsOpen ? (
<Modal onClose={closeLightbox}>
<Carousel
currentIndex={currentImage}
views={photos.map((x) => ({
...x,
srcset: x.srcSet,
caption: x.title,
}))}
/>
</Modal>
) : null}
</ModalGateway>
</div>
);
}
Has anyone played around with the carousel in Next.js and able to see what I'm doing wrong? If you have a better solution I'm open to that too.
Add the following CSS to your globals.css file.
.react-images__view-image--isModal {
display: inline-block;
left: 50%
}
I am using Material UI Select component inside my React project.
I am trying to override the CSS class .MuiPaper-root and or .MuiMenu-list.
My Select component:
<Select
value={selectValue}
disableUnderline
onChange={handleChange}
css={styles.select}
>
{cities?.map((city) => {
return (
<MenuItem
key={city.value}
value={city.value}
css={styles.selectItem}
>
{city.label}
</MenuItem>
);
})}
</Select>
Below isn't working?
export default ({ theme }: StylesProps) => ({
select: css`
.MuiPaper-root {
background-color: red;
}
`,
});
According to the doc, there are several ways that we can modify styles in MUI. In order to change MuiPaper, we can take advantage of createMuiTheme and create a theme as below to override MuiPaper:
const theme = createMuiTheme({
overrides: {
MuiPaper: {
root: {
color: "white"
}
}
}
});
Then, we need to pass it as a theme prop to the ThemeProvider component:
<ThemeProvider theme={theme}>
//***Other part of your code***//
</ThemeProvider>
when it comes to changing MenuProps in the Select component, we can use a property called MenuProps in the Select component(description in doc)
First, I created a list style in useStyles:
const useStyles = makeStyles((theme) => ({
//other classes//
list: {
backgroundColor: "blue"
}
}));
and then passed it as a MenuProp property to the select component:
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
onChange={handleChange}
MenuProps={{ classes: { list: classes.list } }}
>
//***other part of your code***//
</Select>
Here is a codesandbox example that I've created for this example. In the Muipaper modification, I changed the color of the text to white. And in the MenuProps changed the background color to blue.
Hello I am using the React select component, import ReactSelect, {ValueType} from 'react-select';
Currently my component looks like this:
This is the code for it:
<div>
<ReactSelect
className='react-select react-select-top'
classNamePrefix='react-select'
id='displayLanguage'
menuIsOpen={this.state.openMenu}
menuPortalTarget={document.body}
options={timeOptions}
clearable={false}
onChange={this.onChange}
onKeyDown={this.handleKeyDown}
value={this.state.selectedOption}
onMenuClose={this.handleMenuClose}
onMenuOpen={this.handleMenuOpen}
aria-labelledby='changeInterfaceLanguageLabel'
isDisabled={false}
/>
</div>
I want to change the colour of it to grey to look more like this but I am not sure how to:
Try this out,
found here https://react-select.com/styles
const customStyles = {
option: (provided, state) => ({
...provided,
borderBottom: '1px dotted pink',
color: grey,
padding: 20,
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 200,
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = 'opacity 300ms';
return { ...provided, opacity, transition };
}
}
const App = () => (
<Select
styles={customStyles}
options={...}
/>
);
React-select has a prop styles where you set an object that has a list of predefined properties for styling.
You can find more info here: https://react-select.com/styles
But to makes this more easy for you, in your situation you would write something like this.
<ReactSelect
className='react-select react-select-top'
classNamePrefix='react-select'
id='displayLanguage'
menuIsOpen={this.state.openMenu}
menuPortalTarget={document.body}
options={timeOptions}
clearable={false}
onChange={this.onChange}
onKeyDown={this.handleKeyDown}
value={this.state.selectedOption}
onMenuClose={this.handleMenuClose}
onMenuOpen={this.handleMenuOpen}
aria-labelledby='changeInterfaceLanguageLabel'
isDisabled={false}
styles={{
control: (styles) => ({
...styles,
background: '#eee'
})
}}
/>
I'm creating a reusable component using Reactstrap. What I want to do is display an image in the input field as below
What happens is this
How to get the image to the front??
InputFieldWithImage.js
import {
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Button
} from 'reactstrap';
import { Form, FormGroup } from 'reactstrap';
import Amy from './../../assets/images/Amy.png';
import Image from 'react-bootstrap/Image';
function InputFieldWithImage(props) {
const [inputType] = useState(props.type);
const [inputValue, setInputValue] = useState('');
function handleChange(event) {
console.log('Input.js');
// console.log(inputValue);
setInputValue(event.target.value);
if (props.onChange) props.onChange(event);
}
return (
<>
<InputGroup>
<Input
type={inputType}
value={inputValue}
name="input-form"
onChange={handleChange}
class="inputclass"
/>
<InputGroupAddon addonType="append" >
<Image
style={{ width:50, height: 50, marginLeft: -70 }}
src={Amy}
roundedCircle
/>
</InputGroupAddon>
</InputGroup>
</>
);
}
export default InputFieldWithImage;
You could simply handle this issue using CSS by giving the picture "position: absolute"
and the Input container "position: "relative".
I'm new to Material UI and I'm struggling.
I have a button component
export default function TheButton(props: PropsWithChildren<Props>) {
const { className, hover, level,...rest } = props;
const classes = useStyles();
return (
<Button
{...rest}
className={clsx(classes.root, className, hover === 'contained' && classes.hoverContained)}
>
{props.children}
</Button>
);
}
From this component, I'd like to have two variants: contained and outlined. Here is my outlined button.
<TheButton
variant="outlined"
color="secondary"
>
secondary
</TheButton>
When the variant outlined is selected the button has the class Muibutton-outlined. I'd like to override this class to change the border (only in the outlined variant, so only on this class).
So far I've tried something like:
const useStyles = makeStyles((theme: Theme) =>
createStyles({
'.MuiButton-outlinedSecondary':{
border:"2px solid red" ,
},
}
)
It doesn't work.
I have a similar setting, and I tried:
adding a class submit to my button component
<Button
type="submit"
variant="outlined"
disabled={isSaving || invalid || unchanged}
color="secondary"
className={classes.submit}
>
SAVE CHANGES
</Button>
since I have the submit class I can be more precise in my styling like so:
const useStyles = makeStyles({
submit: {
marginTop: padding.medium,
marginLeft: padding.small,
'&.MuiButton-outlinedSecondary': {
border: '1px solid pink',
},
},
});
Here is the result:
Material-ui button with pink border image
As long as I have used Ant design ui kit and I have overrided styles on its default style like this:
<Button type="primary" className={styles.custom_css}>click</Button>
This has done in react and custom_css class overrides its styles on default
This might can help you, if not please let me know