Customization

You must add !important add the end of each file so that your styles take a higher precedence then ours.

Check out the example below.

Custom class names

You can customize / white-label the exported Form component using these specific class names

1. df-sdk-create-btn

Add CSS styles like this:

src/views/Farm.css
.df-sdk-create-btn {
  background: #0275d8 !important;
}

And import them into component page like this:

src/views/Farm.tsx
import { CreateFarm } from "@cryption/dapp-factory-sdk";
import "./Farm.css"; // imported CSS file

const Farm = () => {
  return <CreateFarm />;
};
export default Farm;

Result:

Similar to this example you can style other buttons with classes like:

2. df-sdk-next-btn

3. df-sdk-previous-btn

4. df-sdk-cancel-btn

5. df-sdk-confirm-create-btn

6. df-sdk-form-container

src/views/Farm.css
.df-sdk-form-container {
  background: #0275d8 !important;
}

7. df-sdk-card-container

You can customize / white-label the exported Button component using this class.

1. df-sdk-single-btn

src/views/Farm.css
.df-sdk-single-btn {
  background: #ffffff !important;
  border: 2px solid #0275d8 !important;
  color: #0275d8 !important;
}
src/views/Farm.tsx
import { CreateFarmButton } from "@cryption/dapp-factory-sdk";
import "./Farm.css";

const Farm = () => {
  return <CreateFarmButton />;
};
export default Farm;

Custom Gradients

Both Form as well as Button components accept a prop customGradient : string to customize the gradient styles present throughout the component

Eg:

src/views/Farm.tsx
import { CreateFarm, CreateFarmButton } from "@cryption/dapp-factory-sdk";

const Farm = () => {
  return (
    <>
      <CreateFarmButton
        title="Create new Farm"
       customGradient="linear-gradient(to right, red, yellow)"
      />
      <CreateFarm customGradient="linear-gradient(to right, red, yellow)" />
    </>
  );
};
export default Farm;
PreviousComponentsNextDemo

Last updated