R Shiny CondtionalPanel이 CSS 스타일 시트를 사용하지 않습니다

Question

저는 R Shiny를 사용하여 웹 응용 프로그램을 만듭니다.

개체의 유형에 따라 조건부 피벗 테이블을 표시하기 위해 conditionPanels를 사용하고 있습니다 (df).

아래와 같이 피벗 테이블이 조건부 패널 내에 표시되면 CSS는 무시되고 피벗 테이블은 기본 스타일로 표시됩니다. 그러나 조건부 패널에서 렌더링되지 않은 두 번째 피봇 팅 테이블을 포함하면 두 피벗 팅 테이블 모두 custom.css에 설명 된 스타일을 따르게됩니다.

두 번째 피벗이 없을 때 첫 번째 피벗에 스타일 시트가 사용되는지 어떻게 확인할 수 있습니까?

# Server.R 
server <- shinyServer(function(input, output,session){ 
    df <- data.frame(col1 = c('a','b','c'), 
        col2 = c(1,2,3)) 

    ## Output PivotTable 
    output$pivotTable <- rpivotTable::renderRpivotTable({ 
    rpivotTable(data = df, 
       aggregatorName = 'Sum', 
       rendererName = 'Table') 
    }) 

    ## Output PivotTable2 
    output$pivotTable2 <- rpivotTable::renderRpivotTable({ 
    rpivotTable(data = df, 
       aggregatorName = 'Sum', 
       rendererName = 'Table') 
    }) 

    condition <- ifelse(is.data.frame(df), 'true', 'false') 

    ## Output PivotTable 
    output$panelTable <- renderUI({ 
    conditionalPanel(
     condition, 
     rpivotTableOutput("pivotTable") 
    ) 
    }) 
}) 



# UI.R: 
ui <- dashboardPage(
    title = "", 

    ## Header content + dropdownMenu 
    dashboardHeader(
    title = tags$b(""), 
    titleWidth = 250 
), 

    ## Sidebar content 
    dashboardSidebar(
    width = 250, 
    sidebarMenu(
     id = "tabs", 
     menuItem("tab1", tabName = "tab", icon = icon("table")) 
    ) 
), 

    ## Body content 
    dashboardBody(
    tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")), 
    tabItems(
     tabItem(tabName = "tab", 
     div(
      uiOutput('panelTable') 
     ), 
     div(
      rpivotTableOutput("pivotTable2") 
     ) 
    ) 
    ) 
) 
) 


# Create Shiny object 
shinyApp(ui = ui, server = server) 

CSS :

/* Adjust css of pivot table */ 
#pivotTable{ 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 

.pvtRows, .pvtCols { 
    background: #FAFAFA none repeat scroll 0 0; 
} 

table.pvtTable tbody tr th, table.pvtTable thead tr th { 
    background: #FFFFFF; 
} 

.pvtAxisContainer li span.pvtAttr { 
    background: rgba(147,255,53,0.8); 
} 

Answer 1

HI는이

#pivotTable{ 
    overflow-x: scroll; 
    overflow-y: scroll; 
} 

.pvtRows, .pvtCols { 
    background: #FAFAFA none repeat scroll 0 0 !important; 
} 

table.pvtTable tbody tr th, table.pvtTable thead tr th { 
    background: #FFFFFF!important; 
} 

.pvtAxisContainer li span.pvtAttr { 
    background: rgba(147,255,53,0.8) !important; 
} 

희망 같은 각 규칙 후 !important을 추가 규칙 이상으로 피벗 테이블을 수 생성이 도와 줘요!

Answer 2

난 당신이 사업부의의 내부 클래스를 정의하려고 할 수 있다고 생각합니다. 예를 들어

: 문제는 당신의 CSS는 CSS 규칙에서 기각되고 있다는 점이다

div(class = "pvtRows pvtAxisContainer", 
    uiOutput('panelTable') 
)