我有一個樣式功能，我將樣式應用于搜索輸入框
const SearchInputWrapper = styled.div`
height: auto;
width: 100%;
box-sizing: border-box;
padding: 0;
align-self: stretch;
word-break: break-word;
background-color: grey;
#tags-container {
height: 20px;
text-overflow: unset;
white-space: unset;
:focus {
height: auto !important;
}
}
`;
const SearchBarView = forwardRef((props, ref) => {
const [pinned, setPinned] = useState(false);
return return (
<>
<SearchInputWrapper>
<SearchInputBox
iconMarginTop="6px"
minHeight="30px"
setSearchPinned={setSearchPinned}
isPinnable
isSearchPinned={pinned}
fontSize="14px"
backgroundColor="transparent"
pinUIHeightThreshold={40}
iconSize="15px"
>
</SearchInputBox>
</SearchInputWrapper>
}
當固定狀態為真時，我也想將高度應用為自動。我在不同的函式中定義了狀態。
如何訪問 SearchInputWrapper 中的狀態？理想情況下，我想做類似的事情：
${state.pinned ? `
height: auto !important;
`: `
height: 20px;
`}
但它不會將狀態捕獲為 SearchBarView 函式之外的狀態。請幫忙！
uj5u.com熱心網友回復：
https://codesandbox.io/s/exciting-wood-2v1395?file=/src/App.js
您可以將樣式放在組件宣告中，并從頂部宣告中取出高度，如下所示：
const SearchBarView = forwardRef((props, ref) => {
const [pinned, setPinned] = useState(false);
return return (
<>
<SearchInputWrapper style={{
height : pinned ? "auto !important" : "20px"
}}>
<SearchInputBox
iconMarginTop="6px"
minHeight="30px"
setSearchPinned={setSearchPinned}
isPinnable
isSearchPinned={pinned}
fontSize="14px"
backgroundColor="transparent"
pinUIHeightThreshold={40}
iconSize="15px"
>
</SearchInputBox>
</SearchInputWrapper>
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/455023.html