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.
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:




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


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;

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;

Last modified 1yr ago