javascript - 更改 react-diff-viewer 组件的宽度

Question

我正在使用这个react-diff-viewer包，它非常适合我的目的，但我很难改变视图的宽度。我把它嵌套在一张卡片里我试过改变卡片的宽度，但似乎没有任何效果。我还尝试按照他们的文档从组件内部更改样式。我希望其他人遇到这个问题并可以提供一些指导。

import styles from "./Styles.scss";
import ReactDiffViewer from "react-diff-viewer";

const newStyle = {
    variables: {
      diffContainer: {
        width: "80px",
      },
    },
  };

return (
<Row>
      <Col md="12">
          <Card>
            <div className={styles.CompCard}>
              <ReactDiffViewer
                oldValue={pccData}
                newValue={emrData}
                splitView={true}
                hideLineNumbers={true}
                showDiffOnly={true}
                useDarkTheme={true}
                styles={newStyle}
              />
            </div>
          </Card>
        </Col>
      </Row>
)

在样式文件中，我尝试设置包含组件的 div 的宽度，如下所示：

.compCard {
    width: 90px;
  }

标签： javascriptreactjsstylesjsxdiff