javascript - 调整 react 表大小

Question

我正在尝试使用 React Table 构建一个网页，但我不知道如何调整表的大小以使其不占用整个页面。这是需要在 CSS 中完成还是可以在 React 中渲染？我正在使用 create-react-app。谢谢您的帮助。这是我的 App.js 和 App.css 文件:

应用程序.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;

应用程序.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;
}

请谨慎并根据您的需要进行修改。