Question

我有一个使用grommet ux框架的React / redux应用程序。基本结构是：

public class FileSheetParameters
{
    public FileSheetParameters()
    {
        SheetExists = false;
        IsPlaceholder = false;
        pArray = null;
    }

    public bool SheetExists { get; set; }
    public bool IsPlaceholder { get; set; }
    public List<string> pArray { get; set; }
}

除非单击“设置”图标，否则我希望隐藏<App className="gol"> <Article> <GLHeader /> <SideSplit active={props.nav} onResponsive={checkMobile} > <GLNav /> <GLBoard /> </SideSplit> <Footer colorIndex="neutral-1-a" justify="center">© 2016 </Footer> </Article> </App>组件，允许<GLNav />组件填满屏幕。我有一个redux状态变量连接到图标以切换<GLBoard />道具，并切换active组件上的CSS类。 CSS将宽度设置为0，以便NAV组件滑入和滑出：

<GLNav />

所有这一切都在Chrome中完美运行。但是在Safari中，当SideSplit组件处于非移动模式（屏幕宽度大于750px）时 - 即使.hide{ width: 0 !important; transition: width .3s ease-out; } .show{ transition: width .3s ease-out; }道具为假，并且应用了CSS类active - {{1} } component有一个宽度值。如果我将宽度更改为小于750px，则索引应用.hide类，这将根据需要隐藏<GLNav />。

以下是hidden类：

<GLNav />

Answer 1

Copying my comment to answer as it worked.

Lets' force .hide class maximum width to 0

.hide{
  width: 0 !important; /* may be you don't need !important anymore */
  max-width: 0;
  transition: width .3s ease-out;
}

如何隐藏Grommet SideSplit组件

1 个答案: