Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to override the checkbox predefined classes #488

Open
abhicode95 opened this issue Feb 3, 2024 · 1 comment
Open

How to override the checkbox predefined classes #488

abhicode95 opened this issue Feb 3, 2024 · 1 comment

Comments

@abhicode95
Copy link

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.

@karimfaisall
Copy link

karimfaisall commented Feb 3, 2024

@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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants