Изменить размер таблицы реакции

Question

Я пытаюсь создать веб-страницу с таблицей реагирования и не могу понять, как изменить ее размер, чтобы она не занимала всю страницу.Это нужно делать в CSS или визуализировать в React?Я использую приложение create-реагировать.Спасибо за помощь.Вот мои файлы App.js и App.css:

App.js:

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {

  const data = [{
    name: 'Tanner Linsley',
    age: 26,
    friend: {
      name: 'Jason Maurer',
      age: 23,
    }
  }]

  const columns = [{
    Header: 'Username/Email',
    accessor: 'name' // String-based value accessors!
  }, {
    Header: 'Risk Score',
    accessor: 'age',
    Cell: props => <span className='number'>{props.value}</span> // Custom cell components!
  }, 

  {
    id: 'friendName', // Required because our accessor is not a string
    Header: 'Location',
    accessor: d => d.friend.name // Custom value accessors!
  }]

  return <ReactTable
    data={data}
    columns={columns}
  />
  }
}

export default App;

App.css:

.App {
  text-align: center;
  label{
    font-size: 26px;
  }
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

:local(.form) {
  font-size: 26px;
}

/*:local(.ReactTable) {
  border: 1px solid black; 
  overflow:auto;
}*/

Answer 1

В таблице React используется значение flex. 1. Если вы хотите изменить размер таблицы, вам нужно переопределить класс по умолчанию или иметь возможность задать значение props.Пожалуйста, просмотрите документы, чтобы узнать больше.

React Table Documentation

, например, если вы переопределяете класс

.ReactTable.-striped.-highlight {
    width: 532px;
}

Пожалуйста, будьте осторожны и изменитев соответствии с вашими потребностями.