Сценарий
Basi c таков: у меня есть компонент с width: 100%
, как определено в таблице стилей. Поэтому он должен сохранять ширину своего родительского компонента. Я хочу вычислить ширину моего компонента и применить его к своему дочернему компоненту, потому что я рендеринг его через createPortal
, и я хотел бы, чтобы они были одинаковой ширины. Это работает в браузере. Однако в моем тесте я обнаружил, что window.getComputedStyle(component)
не возвращает ни один из стилей, примененных из таблицы стилей.
Как и предполагалось, я мог бы посмеяться над окном javascript, но я думаю, это на самом деле противоречит тому, что я надеюсь сделать. Я хочу проверить поведение, которое присутствует в браузере: window.getComputedStyle()
возвращает все примененные стили, а не только встроенные.
Я поместил простой пример в codeandbox: https://codesandbox.io/s/goofy-wilson-6v4dp
Также здесь:
function App() {
return (
<div className="App">
<WidthComponent />
</div>
)
}
function WidthComponent() {
const myInput = useRef();
const [inputWidth, setInputWidth] = useState(0);
useEffect(() => {
console.log("in handleLoad");
const width = myInput.current ? myInput.current.offsetWidth : 0;
setInputWidth(width);
}, [myInput]);
return (
<div className="inherited-width" ref={myInput}>
<div style={{ width: inputWidth }} className="child-element">
Hello
</div>
</div>
);
}
// test
test("width is inherited", () => {
const { rerender } = render(
<div style={{ width: "452px" }}>
<WidthComponent />
</div>
);
const element = document.getElementsByClassName("child-element").item(0);
rerender(
<div style={{ width: "452px" }}>
<WidthComponent />
</div>
);
expect(window.getComputedStyle(element).width).toBe("452px");
});
.App {
font-family: sans-serif;
text-align: center;
width: 500px;
}
.inherited-width {
width: inherit;
}
Любая помощь приветствуется.