пытаюсь настроить красивое отображение табов из библиотеки material-ui
Fixed Tabs -> Full width
Но в моем варианте отображения табы занимают не все предоставленное пространство:
Код файла представлен ниже:
import React from "react";
import {withStyles} from "material-ui/styles";
import Button from "material-ui/Button";
import {MenuItem} from "material-ui/Menu";
import Chip from "material-ui/Chip";
import CancelIcon from "@material-ui/icons/Cancel";
import Input from "material-ui/Input";
import Select from "react-select";
import Typography from "material-ui/Typography";
import styles from "../../overtimesStyles";
class Option extends React.Component {
handleClick = (event) => {
this.props.onSelect(this.props.option, event);
};
render() {
const {isFocused, isSelected, onFocus, children} = this.props;
return (
<MenuItem
onFocus={onFocus}
selected={isFocused}
onClick={this.handleClick}
component="div"
style={{
fontWeight: isSelected ? 500 : 400,
}}
>
{children}
</MenuItem>
);
}
}
const SelectWrapped = (props) => {
const {classes, ...other} = props;
return (
<Select
optionComponent={Option}
noResultsText={<Typography>No results found</Typography>}
valueComponent={(valueProps) => {
const {value, children, onRemove} = valueProps;
const onDelete = (event) => {
event.preventDefault();
event.stopPropagation();
onRemove(value);
};
if (onRemove) {
return (
<Chip
tabIndex={-1}
label={children}
className={classes.chip}
deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}
onDelete={onDelete}
/>
);
}
return <div className="Select-value">{children}</div>;
}}
{...other}
/>
);
};
/* eslint-disable react/prop-types */
const DivisionReport = ({
preview = false, saveSelectedDivisions = () => {}, divisions = [1, 2, 4], handleChange, classes, multi,
}) => (
<div className={classes.apartTabRoot}>
{preview}
<Typography variant="display2">Подразделения</Typography>
<Input
fullWidth
inputComponent={SelectWrapped}
value={multi}
onChange={handleChange("multi")}
placeholder="Select multiple countries"
name="react-select-chip"
inputProps={{
classes,
multi: true,
instanceId: "react-select-chip",
id: "react-select-chip",
simpleValue: true,
options: divisions.map(item => ({value: item.name, label: item.name})),
}}
/>
<Button variant="raised" color="primary" onClick={saveSelectedDivisions} className={classes.button}>Скачать</Button>
</div>
);
export default withStyles(styles)(DivisionReport);
и стили:
tab1: {
width: 600,
marginLeft: 100,
},
tab2: {
width: 600,
marginLeft: 100,
},
tabsRoot: {
width: 800,
height: 500,
flexShrink: 1,
flexGrow: 1,
maxWidth: "auto",
},
workarea: {
margin: "0px 5%",
},