OLD - AFFiNE Docs
  • ⚠️
  • ⚠️ This website is inactive
  • ⚠️ For reference only
  • ⚠️ Please use our community site
  • ⚠️ community.affine.pro
  • ⚠️
  • Welcome
    • Welcome to the AFFiNE Docs!
  • Getting Started
    • 🎉Welcome
    • 🆒Install AFFiNE with Docker
    • 💻Deploy AFFiNE to Vercel
    • 🌟How to Get Help
  • Developer Docs
    • 🎉Welcome
    • 🌳Setup
    • 🗂️Working with our code
    • 🖥️Contributions
      • ☘️Writing CSS in AFFiNE
      • 💐Adding UI Components
        • 📐Customize rollup config
      • 🌱Icons
      • 🌐Internationalization
    • 🔭Architecture
      • 🎼CodeMap
      • 💫Editor (Virgo)
      • 🦄Whiteboard (Phasor)
      • 💎Collaboration (OctoBase)
    • 📚Glossary
    • 📒AFFiNE Mentorship Program
  • Internationalization
    • 🎉Welcome
    • 📋Apply
    • 📘Operation Guide
    • 📝Contributors
  • AFFiNE Ambassadors
    • 🎉Welcome
    • ✔️Requirements
    • 🎁Benefits
    • 📋Apply
    • ❓FAQ
    • 📚Branding resources
    • 📝Best practices
    • 📑Resources
  • Branding Resources
    • 🎉Welcome
    • Logo (icon)
    • Logo (text)
    • Logo (3D)
    • Tagline banners
    • Colors
  • Community Links
    • 📢AFFiNE Community
    • 🗣️Official Communities
    • 📗Community Resources
Powered by GitBook
On this page
  • MUI Styled
  • Using SCSS
  • Using CSS

Was this helpful?

  1. Developer Docs
  2. Contributions

Writing CSS in AFFiNE

In AFFiNE we have different ways of writing styles.

MUI Styled

import type { MouseEventHandler, ReactNode } from 'react';
import { styled } from '@toeverything/components/ui';

const CardContainer = styled('div')({
    display: 'flex',
    flexDirection: 'column',
    backgroundColor: '#fff',
    border: '1px solid #E2E7ED',
    borderRadius: '5px',
});

const CardContent = styled('div')({
    margin: '23px 52px 24px 19px',
});

const CardActions = styled('div')({
    cursor: 'pointer',
    display: 'flex',
    alignItems: 'center',
    width: '100%',
    height: '29px',
    background: 'rgba(152, 172, 189, 0.1)',
    borderRadius: '0px 0px 5px 5px',
    padding: '6px 0 6px 19px',
    fontSize: '12px',
    fontWeight: '300',
    color: '#98ACBD',
});

const PlusIcon = styled('div')({
    marginRight: '9px',
    fontWeight: '500',
    lineHeight: 0,
    '::before': {
        content: '"+"',
    },
});

export const Card = ({
    children,
    onAddItem,
}: {
    children?: ReactNode,
    onAddItem?: MouseEventHandler<HTMLDivElement>,
}) => {
    return (
        <CardContainer>
            <CardContent>{children}</CardContent>
            <CardActions onClick={onAddItem}>
                <PlusIcon />
                Add item
            </CardActions>
        </CardContainer>
    );
};

Using SCSS

import styles from './tree-item.module.scss';

export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
    () => {

        return (
            <li
                ref={wrapperRef}
                className={cx(
                    styles['Wrapper'],
                    clone && styles['clone'],
                    ghost && styles['ghost'],
                    indicator && styles['indicator']
                )}
                style={
                    {
                        '--spacing': `${indentationWidth * depth}px`
                    } as CSSProperties
                }
                {...props}
            >

            </li>
        );
    }
);

Using CSS

import 'codemirror/lib/codemirror.css';
import 'codemirror/lib/codemirror';
PreviousContributionsNextAdding UI Components

Last updated 2 years ago

Was this helpful?

🖥️
☘️