Skip to content

How to override the checkbox predefined classes #488

@abhicode95

Description

@abhicode95
image

If I have to provide more space in 'rct-title' class or if I have to change the position of Button having class="rct-collapse rct-collapse-btn" how can we do it.

Activity

karimfaisall

karimfaisall commented on Feb 3, 2024

@karimfaisall

@abhicode95 If you're using traditional CSS stylesheets,You might want to use !important in some cases, although it's generally recommended to avoid it if possible.

.rct-title {
    padding-left: 20px !important; /* Provide more space */
}


.rct-collapse.rct-collapse-btn {
    position: relative;
    top: 5px; 
    right: 5px; 
}

If you're using a CSS-in-JS

import styled from 'styled-components';

const CustomCheckboxContainer = styled.div`
  .rct-title {
    padding-left: 20px; /* Provide more space */
  }

  .rct-collapse.rct-collapse-btn {
    position: relative;
    top: 5px;
    right: 5px; 
  }
`;

If you're using a UI library or component that applies these classes, check the library's documentation for recommended ways to customize styles. Some libraries provide props or theming solutions designed to customize the appearance of components without directly overriding class styles.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @abhicode95@karimfaisall

        Issue actions

          How to override the checkbox predefined classes · Issue #488 · jakezatecky/react-checkbox-tree