Применение css-перехода к ширине элемента, чтобы он покрывал 100% ширины его контейнера div [ReactJS]

Question

import React from 'react';
import PropTypes from 'prop-types';
import SearchIcon from '@material-ui/icons/Search';
import InputBase from '@material-ui/core/InputBase';
import { AccountCircle } from '@material-ui/icons';
import { withStyles, AppBar, Toolbar, Paper, Typography, IconButton } from '@material-ui/core';

const styles = (theme) => ({

    root: {
        borderRadius: theme.shape.borderRadius * 0.5,
        backgroundColor: theme.palette.primary.main,
        display: 'flex',
    },

    logo: {
        borderRadius: theme.shape.borderRadius * 0.5,
        backgroundColor: theme.palette.secondary.main,
        marginTop: theme.spacing.unit * 2,
        marginBottom: theme.spacing.unit * 2,
        marginLeft: theme.spacing.unit * 3,
        marginRight: theme.spacing.unit * 5,
        flex: 0.5,
    },

    logoFont: {
        color: theme.palette.primary.main,
        fontWeight: 'bolder',
        paddingTop: theme.spacing.unit * 0.5,
        paddingBottom: theme.spacing.unit * 0.5,
        paddingLeft: theme.spacing.unit * 2,
        paddingRight: theme.spacing.unit * 2,
    },

    headerPads: {
        paddingTop: theme.spacing.unit * 3,
        paddingBottom: theme.spacing.unit * 2,
        paddingRight: theme.spacing.unit * 10,
        paddingLeft: theme.spacing.unit * 10,
    },

    containerHorizontalAlignment: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'end',
        paddingTop: theme.spacing.unit,
        paddingBottom: theme.spacing.unit,
        flex: 10,
    },

    searchBar: {
        marginTop: theme.spacing.unit,
        marginBottom: theme.spacing.unit,
        marginLeft: theme.spacing.unit,
        marginRight: theme.spacing.unit * 5,
        borderRadius: theme.shape.borderRadius * 0.5,
        backgroundColor: theme.palette.secondary.main,
        width: 'auto',
        /* [theme.breakpoints.up('sm')]: {
            marginLeft: theme.spacing.unit,
            width: 'auto',
        }, */
        display: 'flex',
        flexDirection: 'row',
    },

    searchIcon: {
        color: theme.palette.primary.main,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginLeft: 20,
        height: '100%',
        width: theme.spacing.unit * 7,
    },

    inputRoot: {
        color: theme.palette.primary.main,
        width: '100%',
    },

    inputInput: {
        transition: theme.transitions.create('width'),
        width: 'auto',
        [theme.breakpoints.up('sm')]: {
            width: '25%', //change it to 250(number)
            '&:focus': {
                width: '100%', //change it to 1000(number), it will work fine, but I need percentages. 
            },
        },
    },

    loginButtonContainer: {
         flex: 1,
    },

    loginButton: {
        justifyContent: 'right',
        marginTop: theme.spacing.unit * 0.5,
        color: theme.palette.secondary.main,
    },
});

function ExpandingSearchBar(props) {

    const { classes} = props;

    return (
        <div className={classes.headerPads}>
            <Paper square className={ classes.root }>
                    <div className={classes.logo}>
                        <Typography variant="h5" className={classes.logoFont}>
                            PlaceHolder
                        </Typography>
                    </div>
//Problematic div: the search bar
                    <div style={{border: '1px solid white'}} className={ classes.containerHorizontalAlignment }>
                        <div className={classes.searchBar}>
                            <div className={classes.searchIcon}>
                                <SearchIcon />
                            </div>
                            <InputBase 
                                placeholder='Search'
                                classes={{
                                    root: classes.inputRoot,
                                    input: classes.inputInput,
                                }}
                            />
                        </div>
                    </div>
                    <div className={classes.loginButton}>
                        <IconButton className={classes.loginButton}>
                            <AccountCircle fontSize='large'/>
                        </IconButton>
                    </div>
            </Paper>
        </div>
    );
}

ExpandingSearchBar.propTypes = {
    classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(ExpandingSearchBar);

Проблемы:

1. в styles.inputInput Я создал переход, используя theme.transition.create материала-пользовательского интерфейса, проблема в том, что если ширинаявляются фиксированными числами, это работает нормально, если я передам проценты к нему, компонент просто имеет фиксированную ширину без расширения или переходов вообще.

2. Еще одна проблема заключается в том, если ширина searchBar это большечем его родитель сможет вместить, он не вытолкнет «PlaceHolder» из Paper, но нажмет кнопку в конце элемента Paper и сам вытолкнет себя за правую границу.

Я использовал theme.create.transitions() из material-ui, но, пожалуйста, предложите любые решения, использующие только CSS.

Попробуйте здесь в песочнице и переключите браузерокно песочницы на весь экран.

Спасибо

Answer 1

Основной проблемой было то, что ваш "searchBar" div ограничивал значение "100%" для вашего ввода.Ключом является использование InputBase для всего поискового ввода, что означает использование startAdornment для значка поиска:

      <div className={classes.searchBar}>
        <InputBase
          startAdornment={<SearchIcon />}
          placeholder="Search"
          classes={{
            root: classes.inputRoot,
            focused: classes.inputFocused
          }}
        />
      </div>

Затем были сделаны некоторые корректировки, необходимые для стилизации (некоторые стили перенесли из searchBar до inputRoot и от inputInput до inputRoot):

  searchBar: {
    width: "100%",
    display: "flex",
    flexDirection: "row"
  },
  inputRoot: {
    marginTop: theme.spacing.unit,
    marginBottom: theme.spacing.unit,
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit * 5,
    borderRadius: theme.shape.borderRadius * 0.5,
    backgroundColor: theme.palette.secondary.main,
    color: theme.palette.primary.main,
    transition: theme.transitions.create("width"),
    width: "auto",
    [theme.breakpoints.up("sm")]: {
      width: "25%" //change it to 250(number)
    },
    "&$inputFocused": {
      [theme.breakpoints.up("sm")]: {
        width: "100%" //change it to 1000(number), it will work fine, but I need percentages.
      }
    }
  },
  inputFocused: {},

Вот рабочая модификация вашей песочницы: